Table headers are disportional in relation to the table width [Archive]

jason_kelly

03-20-2014, 02:27 AM

Hello,

I really need the help from the experts on this one.

I can't really seem figure out as to why my table header are so disproportional to the table width itself. It just doesn't make any sense to me. Help =\

Here is the HTML markup:

<!DOCTYPE html>
<html>
<head>

<style type="text/css">

/*------------------------------------------------------------------
Table Style
------------------------------------------------------------------ */
table a:link {
color: #666;
font-weight: bold;
text-decoration:none;
}
table a:visited {
color: #999999;
font-weight:bold;
text-decoration:none;
}
table a:active,
table a:hover {
color: #bd5a35;
text-decoration:underline;
}
table {
font-family:Arial, Helvetica, sans-serif;
color:#666;
font-size:12px;
background:#eaebec;
border-collapse:collapse;
border-spacing: 0;
table-layout: fixed;
width: 100%;
}
table th {
border-bottom:1px solid #e0e0e0;
border-right: 1px solid #e0e0e0;
background: #ededed;
}
table th:first-child {
text-align: left;
}
table tr:first-child th:first-child {
border-left: 0;
}

table td:first-child {
text-align: left;
border-left: 0;
}
table td {
border-bottom:1px solid #e0e0e0;
border-right: 1px solid #e0e0e0;
background: #fafafa;
}
table th, table td {
padding: 10px;
width: 200px;
}
table tr:last-child td {
border-bottom: 0;
}

table tr:hover td {
background: #f2f2f2;

}

#wrapper {
width: 100%;
height: 200px;
overflow-x: scroll;
overflow-y: scroll;
border: 1px solid rgb(205,205,205);
}
table thead {
position:fixed;

}

table td > div {
overflow: hidden;
white-space: nowrap;
}

</style>

</head>

<body>

<div id="wrapper">
<table>


<thead>
<tr>
<th>Task Details</th>
<th>File Number</th>
<th>Firstname</th>
<th>Progress</th>
<th>Vital Task</th>
</tr>
</thead>



<tbody>

<tr>
<td>Create</td>
<td> </td>
<td> </td>
<td>100%</td>
<td>Yes</td>
</tr>

<tr>
<td>Take the dog</td>
<td> </td>
<td> </td>
<td>100%</td>
<td>Yes</td>
</tr>

<tr>
<td>Waste half</td>
<td> </td>
<td> </td>
<td>20%</td>
<td>No</td>
</tr>

<tr>
<td><div>Feel inferior</div></td>
<td> </td>
<td> </td>
<td>80%</td>
<td>No</td>
</tr>

<tr>
<td><div>Some long text that shouldn't resize the box</div></td>
<td> </td>
<td> </td>
<td>100%</td>
<td>Yes</td>
</tr>

<tr>
<td><div>Vow to complete</div></td>
<td> </td>
<td> </td>
<td>23%</td>
<td>yes</td>
</tr>

<tr>
<td>Procrastinate</td>
<td> </td>
<td> </td>
<td>80%</td>
<td>No</td>
</tr>

<tr>
<td><a href="#yep-iit-doesnt-exist">Hyperlink Example</a></td>
<td> </td>
<td> </td>
<td>80%</td>
<td><a href="#inexistent-id">Another</a></td>
</tr>

</tbody>


</table>
</div>

</body>
</html>

Much thanks and appreciation for all your help.

Cheers,

Jay

Beverleyh

03-20-2014, 11:22 AM

I'm not sure this can be done 'perfectly' without JavaScript or some markup-mashing.

- Alt Option 1 - Use JavaScript https://www.google.co.uk/#q=fixed+table+header+jquery

- Alt Option 2 - Separate the markup so the header is in one table and the table body cells are in another, then position the header table absolutely with a higher z-index.

That being said, I did play around with the sample markup you provided and adding this CSS gives something workable, with a few caveats;

table {
position:relative;
width:100%;
min-width:604px; /* optional - helps maintain visual consistency/integrity of table cell structure */
}
table thead tr {
display:table;
position:fixed;
width:calc(100% - 33px); /* 100% width less 2 sets of scrollbars at 16px each, and a 1px border */
}
table thead th {
width:20%; /* equal division of th to match td */
min-width:100px; /* optional - helps maintain visual consistency/integrity of table cell structure */
border-right:0; /* optional - cross browser visuals - borders go 1px 'off' in diff browsers at diff widths */
}

calc() is only supported in IE9 and up http://caniuse.com/calc Other modern browsers *should* be OK.

Setting minimum widths on the overall table and th cells help maintain visual consistency in a fluid environment. Without it, the header cells visibly come 'unstuck' from the table body cells, which look a bit rubbish and gets confusing. But even with the fixed width, the headers will still flow off over the edge of the scrollbar on the right when the window becomes too narrow. Not hugely obvious in the example, but something to bare in mind if you change the header background colour to something other than light grey.

Removing the border on the th cells looks better across browsers. With them, when the window is resized, the odd one gets thrown out of whack by a pixel or so - unpredictably in different browsers due to differences with pixel rendering. If you use this border-right:0; option, you will probably want to nudge the calc() values from 33px to 32px too.