javascript - table 上的基础网格系统？

Question

我有一个像这样的表:

<table>
  <thead>
  <tr>
    <td>Col1</td>
    <td>Col2</td>
    <td>Col3</td>
  </tr>
  <tbody>
  ...
  </tbody>
</table>

我想使用 grid system of foundation在我的 table 上。例如，我想指定我的列的大小为 2、4、6，这给出了基础网格系统的 12 列。

我试过这个 SCSS:

.trow {
  @include grid-row();
}

.tsize-2 {
  @include grid-column(2);
}

.tsize-4 {
  @include grid-column(4);
}

.tsize-6 {
  @include grid-column(6);
} 

像这样应用在我的 HTML 中:

                 <thead>
                    <tr class="trow">
                        <td class="tsize-4">Title</td>
                        <td class="tsize-6">Description</td>
                        <td class="tsize-2">Price</td>
                    </tr>
                </thead>

它仍然没有以正确的大小显示列。

如何在表格上使用 Foundation Grid System？

Answer 1

与大多数网格系统一样，Foundation 网格系统将所有列 float 成一行(随后明确固定)。将 float 应用于表 td 会产生一些奇怪的结果。

如果你想让你的表格响应式搜索“响应式表格”解决方案，比如这个:

http://foundation.zurb.com/responsive-tables.html

或者，您可以使用 div 结构来模拟表格，从而允许您使用网格系统。