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 acplish this with pure CSS? It doesn't have to be perfect, just as long as it looks decent that's all I need.

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 acplish this with pure CSS? It doesn't have to be perfect, just as long as it looks decent that's all I need.

• javascript
• html
• css
• dom

• I can give you a javascript solution, that is not "crazy javascript"... – LcSalazar Commented May 22, 2014 at 17:59
• Feel free to post it as an answer :) – ChevCast Commented May 22, 2014 at 18:09

3 Answers 3

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/5mfVT/

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>

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.