How do you keep two tables' column widths in sync while resizing?

Question

I've looked around a bit and can't seem to find a decent solution, that doesn't require some crazy JavaScript, to the following problem.

There are two separate tables in the example. The first one is just for the headers. The second is for the body. We need two tables because the requirement for this feature is that the body table be locally scrollable, meaning the headers need to remain visible as the table body scrolls. We cannot use any new fancy HTML 5 pivot tables because we have to support IE.

Is there a way to accomplish this with pure CSS? It doesn't have to be perfect, just as long as it looks decent that's all I need.

I can give you a javascript solution, that is not "crazy javascript"... — LcSalazar, May 22 '14 at 17:59

score 5 · Answer 1 · answered May 22 '14 at 18:17

This is a sample of the concept, using Jquery. (You can do it vanilla, but requires more code)

<table id="tb1" border="1">
        <tr>
            <td>Title 1</td>
            <td>Title 2</td>
            <td>Title 3</td>
            <td>Title 4</td>
        </tr>
    </table>

    <table id="tb2" border="1">
        <tr>
            <td>Content 00001</td>
            <td>Content 02</td>
            <td>Content 0000000000003</td>
            <td>Content 000000000000000000004</td>
        </tr>
    </table>

JS:

function SetSize() {
    var i = 0;
    $("#tb2 tr").first().find("td").each(function() {
        $($("#tb1 tr").first().find("td")[i]).width(
            $(this).width()
        );
        i++;
    });
}
$(window).resize(SetSize);
SetSize();

No "crazy javascript" :D
Here's a working fiddle, with a few css to make it look better: http://jsfiddle.net/5mfVT/

Why are you putting the function in the global namespace? Also, it's unreasonable to trigger _any_ function on every single triggering of the resize event, there can easily be tens if not hundreds of triggers in a short timeframe. — Etheryte, Jan 30 '15 at 00:16

score 2 · Accepted Answer · edited Nov 22 '15 at 05:07

Definitely doable in just CSS. Just set widths on both tables, trs, and tds, apply word-wrapping, and setting table-layout to fixed. This last setting makes it use the defined column widths, rather than be determined by the cell content's width.

#tb1 {     width: 80%;     }

#tb2 {     width: 80%;     }

#tb1 tr {     width: 100%;     }

#tb2 tr {     width: 100%;     }

.col1 {     width: 35%;     }
.col2 {     width: 35%;     }
.col3 {     width: 20%;     }
.col4 {     width: 10%;     }

#tb1, #tb2 {     table-layout: fixed;     }
#tb1 td, #tb2 td {     word-wrap: break-word;     }

<table id="tb1" border="1">
  <tr>
    <td class="col1">Title 1</td>
    <td class="col2">Title 2</td>
    <td class="col3">Title 3</td>
    <td class="col4">Title 4</td>
  </tr>
</table>

<table id="tb2" border="1">
  <tr>
    <td class="col1">Content 00001</td>
    <td class="col2">Content 02</td>
    <td class="col3">Content 0000000000003</td>
    <td class="col4">Content 000000000000000000004</td>
  </tr>
</table>

Etheryte · Answer 3 · 2015-01-30T00:15:17.937

-3

Tables resize to as small as possible. Your headers' table has narrower content and can therefore resize to smaller widths before seizing to resize.
A non-Javascript solution is to either define widths for all of your columns or to define a min-width property your tables that fits the larger of the two minimal widths.

edited Jan 30 '15 at 00:15

answered May 22 '14 at 18:23

Etheryte

24,589
11
71
116

How do you keep two tables' column widths in sync while resizing?

3 Answers3