How to fit a table into Susy grid?

Question

I'm trying to figure out how to fit a <table> into a Susy grid. Meaning a <td> or a <th> should be as wide as a Susy grid column or a number of Susy grid columns.

My idea is to set the <col> elements to the width returned by Susy's space() function. Like:

(HTML)

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

and:

(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);
            }
        }
    }
}

Well, it doesn't work ;)

Has anybody built such a table? I would be glad if you let me know!

ps: I'm going to try to set up a jsfiddle

Answer 1

I found out why this isn't working: the @include span-columns($total-columns omega); statement makes the table display: inline. Setting it back to display: table results in the desired behavior.

But I'm wondering, if I just use width: 100% instead of using the @include for my table...