Question

在视图中我有表：

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

我希望在视图中看到下一个结果：

table_row_1 | table_row_2 
table_row_3 | table_row_4 
table_row_5 | table_row_6 
etc.

Answer 1

这个怎么样：

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>

我使用!important因为我们很可能不得不推翻Twitter Bootstrap（根据您的班级名称）。最好不要使用!important并复制Bootstrap类/声明（并使它们更具体一些），但这只是为了简单起见并证明此解决方案有效。

Answer 2

最好的方法是避免使用表格而是使用div元素。它们更容易设计和维护。

Bootstrap图书馆众所周知，几乎在每个网站都使用过！
您还可以定义允许的最小列大小，例如。

<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>

如果您想减少列数，只需将col-md-增加到6,8等。
请参阅Sample in JSFiddle

如何在两列中显示表

2 个答案: