Question

我正在试图弄清楚如何将<table>放入Susy网格中。这意味着<td>或<th>应该与Susy网格列或多个Susy网格列一样宽。

我的想法是将<col>元素设置为Susy的space()函数返回的宽度。像：

（HTML）

<colgroup>
    <col class="one">
    <col class="two">
    <col class="three">
    <col class="four">
</colgroup>

和

（SCSS）

table {
    @include span-columns($total-columns omega);

    colgroup {
        @include reset-columns;
        col {
            span: 1;

            &.one {
                width: space(1);
            }

            &.two {
                width: space(4);
            }

            &.three {
                width: space(4);
            }

            &.four {
                width: space(6);
            }
        }
    }
}

嗯，它不起作用;）

有没有人建这样的桌子？如果你让我知道，我会很高兴的！

ps：我将尝试设置一个jsfiddle

Answer 1

我发现了为什么这不起作用：@include span-columns($total-columns omega);语句构成了表display: inline。将其重新设置为display: table会产生所需的行为。

但我想知道，如果我只使用width: 100%而不是使用@include作为我的表...

如何将表格放入Susy网格？

1 个答案: