Como mostrar a tabela em duas colunas

tendo em conta que tenho uma tabela: 

<table class="table table-hover table-striped">
     ....
</table>

quero ver o próximo resultado à vista: 

table_row_1 | table_row_2 
table_row_3 | table_row_4 
table_row_5 | table_row_6 
etc.
Author: JoostS, 2018-01-18
Source

2 answers

Que tal isto: 

table, tr, td, thead, tbody {display: block!important;}
tr {float: left!important; width: 50%!important;}
<table class="table table-hover table-striped">
     <tr><td>1</td></tr>
     <tr><td>2</td></tr>
     <tr><td>3</td></tr>
     <tr><td>4</td></tr>
</table>

Eu usei {[[2]} porque é provável que tenhamos de anular o Twitter Bootstrap (de acordo com os vossos nomes de classe). Seria melhor não usar !important e copiar as classes/declarações de Bootstrap (e torná-las um pouco mais específicas), mas isso é apenas para simplicidade e para provar que esta solução funciona.

 2
Author: JoostS, 2018-01-18 20:05:37

O melhor seria evitar a utilização de tabelas e, em vez disso, usar elementos div. Eles são muito mais fáceis de estilo e manutenção.

a biblioteca Bootstrap é bem conhecida e utilizada em quase todos os sites!
Você também pode definir o tamanho mínimo permitido da coluna, por exemplo.

<div class="row">
  <div class="col-md-4">table_row_1</div>
  <div class="col-md-4">table_row_2</div>
  <div class="col-md-4">table_row_3</div>
  <div class="col-md-4">table_row_4</div>
  <div class="col-md-4">table_row_5</div>
  <div class="col-md-4">table_row_6</div>
</div>

Se quiser diminuir a contagem de colunas, aumente apenas o col-md- para 6, 8 etc.
Por favor, veja a amostra em JSFiddle.

 1
Author: Mr. Blond, 2018-01-18 19:53:50