Question

I have a problem: my table displays perfectly without a “separator” row. This row server to separate the two sections of my table. The column in this row (colspan=2) contains a long string describing the section of the table below it. Unfortunately, the presence of this long string causes the rest of the table to become misaligned. How can I tell the table to effectively ignore this column when sizing the table, or how can I otherwise fix the issue?

Answer 1

Use colgroup and col tags (setting the column widths this way). And then add table-layout: fixed; to your table’s CSS:

<table>
    <colgroup>
        <col style="width:25%" />
        <col style="width:25%" />
        <col style="width:25%" />
        <col style="width:25%" />
    </colgroup>
    <thead>
        <!-- thead stuff here -->
    </thead>
    <tbody>
        <!-- tbody stuff here -->
    </tbody>
</table>

table { table-layout: fixed; }