Apologies if you have seen some of my previous posts today. I created a piece of HTML that was necessary for what I wanted to achieve.
- I needed a horizontal scroll that would keep the thead aligned with tbody as you scrolled through the content.
- I also required a vertical scroll that would keep the thead in view at all times.
To accomplish this, I ended up using two tables. While it works, I am facing an issue with the column widths being determined by the size of the text inside them rather than the width property I set. Can anyone assist me with this?
All I want is for the width of a column to actually represent the width of that column.
EDIT: The reason why the widths are set to 1200px is because within the overflow div, the actual size is 8 times 150px.
<script type='text/javascript'>
function MatchScroll(SourceID, TargetID, DoIfMoz) {
if (DoIfMoz || navigator.userAgent.indexOf("Firefox") == -1) document.getElementById(TargetID).scrollLeft = document.getElementById(SourceID).scrollLeft;
}
</script>
<div id='HeaderTable' style='width:883px;overflow:auto;overflow-y:hidden;overflow-x:hidden;'>
<table border='1' id='HeaderTable' style='width:1200px;float:left;table-layout:fixed;'>
<thead style='text-align:left;'>
<tr style='display:block;margin-left:1px;'>
<th width='150' style='width:150px;'>t</th>
<th width='150' style='width:150px;'>t</th>
<th width='150' style='width:150px;'>tt</th>
<th width='150' style='width:150px;'>t</th>
<th width='150' style='width:150px;'>t</th>
<th width='150' style='width:150px;'>ttttt</th>
<th width='150' style='width:150px;'>ttttt</th>
<th width='150' style='width:150px;'>tt</th>
</tr>
</thead>
</table>
</div>
<div id='DataTable' style='height:300px;float:left;overflow:auto;overflow-x:auto;overflow-y:scroll;width:900px;' onmouseup="MatchScroll('DataTable','HeaderTable', true);" onmousemove="MatchScroll('DataTable','HeaderTable', false);" >
<table border='1' style='width:1200px;float:left;table-layout:fixed;'>
<tbody id='ClearDetails'>
<tr id='Row0' style='color:black;height:auto;display:block;'>
<td style='width:150px;'>1</td>
<td style='width=150px;'>1</td>
<td style='width=150px;'>1</td>
<td style='width=150px;'>1</td>
<td style='width=150px;'>1111111111</td>
<td style='width=150px;'>1</td>
<td style='width=150px;'>1</td>
<td style='width=150px;'>1</td>
</tr>
</tbody>
</table>
</div>