Question

我有一张表：

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

我想在我的桌子上使用grid system of foundation。例如，我想指定我的列大小为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

基础网格系统与大多数网格系统一样，将所有列浮动（随后是明确固定的）。将浮点数应用于表格td将会产生一些奇怪的结果。

如果您想让表格响应式搜索“响应式表格”解决方案，例如：

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

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

Answer 2

http://jsfiddle.net/t4vj72d6/2/

td {
    border: 1px solid black;
}
table {
   width: 75%
}

<tr class="row">
    <td class="small-2 columns">Title</td>
    <td class="small-4 columns">Description</td>
    <td class="small-6 columns">Price</td>
</tr>

我在这个小提琴中尝试过它，只要你设置表格的宽度就可以正常工作。我知道这不是sass，但我不明白为什么它会有所不同。

表格上的基础网格系统？

2 个答案: