What's the best way to have a table with sticky header? - html

Question

What I'm currently doing is 2 tables, one for headers and one for data, in combination with table-layout:fixed and fixed widths for each column.
I don't like that solution since I have to keep adjusting widths and they don't look as good a the auto adjusted ones you get when the table layout isn't fixed.
I also considered a JS solution where the data table is laid out, then JS picks up each column width and applies it to the header table. The advantage of this is fluid td widths dictated by content. The problem is table contents can change dynamically, and the JS script needs to know that so it can recompute the widths... ew.
Is there a better way of doing that?

Answer 1

better to use some plugins like jQuery Plugin for Fix Header Table
or if you want the pure CSS and want to know how it works. you can try the below fiddle https://jsfiddle.net/dPixie/byB9d/3/light/
its all about showing the content if div which is inside the TH
th {
height: 0;
line-height: 0;
padding-top: 0;
padding-bottom: 0;
color: transparent;
border: none;
white-space: nowrap;
}
th div{
position: absolute;
background: transparent;
color: #fff;
padding: 9px 25px;
top: 0;
margin-left: -25px;
line-height: normal;
border-left: 1px solid #800;
}
th:first-child div{
border: none;
}