Is there a way to adjust the code below so that the Table THead aligns with the TD's and maintains the width of the table? The current issue is that the table headers are extending beyond the div size, causing the table to span horizontally across the page.
<!DOCTYPE html>
<html>
<head>
<link rel="stylesheet" href="http://code.jquery.com/ui/1.10.1/themes/base/jquery-ui.css" />
<script src="http://code.jquery.com/jquery-1.9.1.js"></script>
<script src="http://code.jquery.com/ui/1.10.1/jquery-ui.js"></script>
<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-radius:3px;
border-collapse:collapse; border-spacing: 0;
box-shadow: 0 1px 2px #d1d1d1;
border-left: 1px solid #ccc;
border-right: 1px solid #ccc;
table-layout: fixed;
}
table th {
border-bottom:1px solid #ccc;
border-left: 1px solid #ccc;
background: #ededed;
}
table tr {
text-align: center;
}
table td {
border-bottom:1px solid #ccc;
border-left: 1px solid #ccc;
background: #fafafa;
text-align: left;
}
table tr:hover td {
background: #f2f2f2;
}
table th, table td {
height: 20px;
width: 200px;
}
#container {
width : 98.7%;
height: 300px;
overflow-x: scroll;
overflow-y: scroll;
}
table tr td:first-child, table tr th:first-child {
border-left: 0;
}
table thead {
_position: fixed;
_position: relative;
_position: absolute;
}
TABLE THEAD TR TH {
top:expression(this.offsetParent.scrollTop);
border-top:1px solid #ccc;
_position:relative;
_position: absolute;
_position: fixed;
}
table tr:first-child td {
border-top: 0;
}
</style>
</head>
<body>
<div id="container">
<table id="data">
<!-- Table Header -->
<thead>
<tr>
<th>File Number</th>
<th> </th>
<th> </th>
<th>Firstname</th>
<th>Lastname</th>
<th>Progress</th>
<th>Vital Task</th>
</tr>
</thead>
<!-- Table Header -->
<!-- Table Body -->
<tbody>
<tr>
<td>ABC-123-123456</td>
<td> </td>
<td> </td>
<td> </td>
<td> </td>
<td>100%</td>
<td>Yes</td>
</tr><!-- Table Row -->
<tr>
<td>ABC-123-123456</td>
<td> </td>
<td> </td>
<td> </td>
<td> </td>
<td>100%</td>
<td>Yes</td>
</tr><!-- Darker Table Row -->
<!-- Rest of the table body content omitted for brevity -->
</tbody>
<!-- Table Body -->
</table>
<script>
$(function() {
$( "#data tr th" ).resizable({
handles: 'e'
});
});
</script>
</div>
</body>
</html>