I created an HTML table with multiple header rows and attempted to freeze them. The header rows are locked in place however I was expecting the data to be aligned properly with the bottom header row.
Is it possible to fix this? I've seen some solutions here of freezing rows and columns with jQuery. But, I don't really know jQuery so I was wondering if there is a simpler way to do it.
Data would line up with Header Row 3. Example:
Here is demo of my table:
<html>
<head>
<meta charset="utf-8">
<title>Untitled Document</title>
<style>
table {
max-width:980px;
table-layout:fixed;
margin:auto;
}
th, td {
padding:5px 10px;
border:1px solid #000;
}
thead, tfoot {
background:#f9f9f9;
display:table;
width:100%;
width:calc(100% - 18px);
}
tbody {
height:300px;
overflow:auto;
overflow-x:hidden;
display:block;
width:100%;
}
tbody tr {
display:table;
width:100%;
table-layout:fixed;
}
</style>
</head>
<body>
<table id="a" border="1" cellpadding ="5" align ="center">
<thead>
<tr>
<th rowspan="2" colspan="2" align="center"><font face="Arial Bold" size="2">Style</font></th>
<th colspan="3" align="center"><font face="Arial Bold" size="2">Tar 1</font></th>
<th colspan="3" align="center"><font face="Arial Bold" size="2">Tar 2</font></th>
</tr>
<tr>
<th colspan="3" align="center"><font face="Arial Bold" size="2">%</font></th>
<th colspan="3" align="center"><font face="Arial Bold" size="2">°</font></th>
</tr>
<tr>
<th align="center"><font face="Arial Bold" size="2">Description</font></th>
<th align="center"><font face="Arial Bold" size="2">Style Code</font></th>
<th align="center"><font face="Arial Bold" size="2">Min</font></th>
<th align="center"><font face="Arial Bold" size="2">Target</font></th>
<th align="center"><font face="Arial Bold" size="2">Max</font></th>
<th align="center"><font face="Arial Bold" size="2">Min</font></th>
<th align="center"><font face="Arial Bold" size="2">Target</font></th>
<th align="center"><font face="Arial Bold" size="2">Max</font></th>
</tr>
</thead>
<tbody>
<tr>
<td align="center"><font face="Arial Bold" size="2">Bavarian Lager</font></td>
<td align="center"><font face="Arial Bold" size="2">LAG</font></td>
<td align="center"><font face="Arial Bold" size="2">5.31</font></td>
<td align="center"><font face="Arial Bold" size="2">5.30</font></td>
<td align="center"><font face="Arial Bold" size="2">5.31</font></td>
<td align="center"><font face="Arial Bold" size="2">5.37</font></td>
<td align="center"><font face="Arial Bold" size="2">5.37</font></td>
<td align="center"><font face="Arial Bold" size="2">5.37</font></td>
</tr>
</tbody>
</table>
</body>
</html>