How can I make a fluid width, fluid height, fixed header table with jQuery?

css, html, jquery

Solution

This isn't complete and hasn't been checked in anything but Chrome, but hopefully it'll get you on the right track.

Basically the approach is to make the container `position:relative;` and the `th` tags all `position:absolute;`. This requires quite a bit of extra code for correct positioning, but it's a decent method to make the header always stay and the table cells scroll.

Alternatively you could make the headers a separate div from the table, but you'll still need to set widths so the columns line up. A horse a piece, really.

http://jsfiddle.net/daCrosby/JXWfC/9/

<div id="hold">
    <div class="header">
        <h4>title goes here</h4>
    </div>
    <div class="container">
        <div class="sidebar">sidebar<br />nav<br />goes<br />here</div>
        <div class="content" >
            <table>
                <thead>
                    <tr>
                        <th class="col1">column 1</th>
                        <th class="col2">2</th>
                        <th class="col3">three</th>
                        <th class="col4">this is column four</th>
                    </tr>
                </thead>
                <tbody>
                    <tr>
                        <td class="col1">data</td>
                        <td class="col2">can</td>
                        <td class="col3">have</td>
                        <td class="col4">different widths: not all the same</td>
                    </tr>
                [ ... ]

CSS

body{
    background:#000;
}
div {
    display:inline-block;
    vertical-align:top;
    -moz-box-sizing: border-box; -webkit-box-sizing: border-box; box-sizing: border-box;
}
#hold{
    display:block;
    padding:40px 10px;
    width:95%;
    margin:auto;
}
.content table,
.header,
.container{
    width:100%;
    max-height:100%;
}
.header {
    background:darkgray;
    color:white;
    text-align:center;
}
.container {
    background:lightgray;
}
.sidebar {
    width:20%;
    background:green;
    color:white;
    float:left;
}
.content {
    width:80%;
    position:relative;
}
h4 {
    margin:0;
}
table {
    border-collapse: collapse;
    border-spacing: 0;
    background:red;
    overflow-y:scroll;
    height:300px;
    display:block;
}
thead {
    position:absolute;
    top:1px;
    left:0px;
    right:0px;
}
tbody{
    padding:1.3em 0px 0px;
    margin:0px;
    display:block;
}
tr{
    width:100%;
    display:block;
    margin-top:-2px;
}
th {
    background:#666;
    color:#fff;
    position:absolute;
}
td {
    display:inline-block;
    margin:0px;
    padding:0px;
    background:#ddd;
}
td.col2,
td.col3,
td.col4{
    margin-left:-4px;
}
.col1 { width:20%; }
.col2 { width:10%; }
.col3 { width:20%; }
.col4 { width:50%; }
th.col1 { left:0px; right:80%; }
th.col2 { left:20%; right:70%; }
th.col3 { left:30%; right:50%; }
th.col4 { left:50%; right:0x; }

Problem

Original source