【问题标题】:How to display table in two columns如何在两列中显示表格
【发布时间】:2018-06-27 22:50:29
【问题描述】:

在视图中我有表:

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

【问题讨论】:

  • 调整窗口大小时表格会改变布局?什么时候增加窗口的高度或减少它的高度?
  • 是的。我想做。理想的解决方案将是下一个:如果窗口小 - 1 列。如果窗口很大 - 2 或 3 列
  • window的宽高都会影响表格吗?还是只有其中之一?
  • 只有宽度会影响。

标签: html twitter-bootstrap html-table two-columns


【解决方案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 类/声明(并使它们更加具体),但这只是为了简单起见并证明此解决方案有效。

【讨论】:

    【解决方案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

    【讨论】:

      猜你喜欢
      • 2016-06-06
      • 1970-01-01
      • 1970-01-01
      • 1970-01-01
      • 2017-03-07
      • 1970-01-01
      • 1970-01-01
      • 2019-10-03
      • 2020-12-02
      相关资源
      最近更新 更多