如何将表格放入 Susy 网格中？答案

【问题标题】：How to fit a table into Susy grid?如何将表格放入 Susy 网格中？
【发布时间】：2013-09-01 18:15:44
【问题描述】：

我试图弄清楚如何将<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

【问题讨论】：

标签： html-table width susy-compass col colgroup

【解决方案1】：

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

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

【讨论】：

同样，我设置td { display: block !important; }