我需要你的帮助。
如何修改 HTML/CSS 编码,以允许当用户水平左右滚动时,列和数据同步移动。现在,当用户向后和第四个水平条滑动时,我的列没有正确排列?
<!DOCTYPE html>
<html>
<head>
<!-- Upgrade MSIE5.5-8 to be compatible with modern browsers -->
<!--[if lt IE 9]>
<script src="http://ie7-js.googlecode.com/svn/version/2.1(beta4)/IE9.js"></script>
<![endif]-->
<style>
/* ----- Scrolling Table ----- */
.dataGridHeader {
position:relative;
padding-top:24px;
border-left: 1px solid #999;
border-bottom: 1px solid #999;
}
.dataGridContent {
overflow-x:scroll;
overflow-y:scroll;
height:144px;
}
.dataGridHeader thead tr {
position:absolute;
top:0;
left:0;
}
.dataGridHeader table thead tr th, .dataGridHeader table tbody tr td {
text-align:left;
height:0;
}
table.scrolltablestyle {
border-top: 1px solid #D9D9D9;
table-layout: fixed;
width: 1100px;
}
table.scrolltablestyle tbody tr td{
background: #fff;
text-align:left;
padding: 4px 9px;
border-right: 1px solid #999;
}
table.scrolltablestyle thead tr th{
background-color: #FFFFD9;
font-weight: normal;
text-align:left;
padding: 4px 9px 4px 9px;
border-bottom: 1px solid #999;
}
table.scrolltablestyle thead tr th {
border-right: 1px solid #999;
border-top: 1px solid #999;
}
table.scrolltablestyle tbody tr td{
border-right: 1px solid #999;
width: 200px;
}
table.scrolltablestyle tbody tr:last-child td{
border-bottom: 0;
}
</style>
</head>
<body>
<div class="dataGridHeader">
<div class="dataGridContent">
<table cellpadding="0" cellspacing="0" class="scrolltablestyle">
<thead>
<tr>
<th>Shopper Name</th>
<th> </th>
<th> </th>
<th>First Name</th>
<th>Last Name</th>
<th>User ID</th>
<th>Status</th>
<th>TestColumn</th>
</tr>
</thead>
<tbody>
<tr>
<td>C2C Fishing</td>
<td> </td>
<td> </td>
<td>John</td>
<td>Doe</td>
<td>C2C Fishing</td>
<td>Enabled</td>
<td>Enabled</td>
</tr>
<tr>
<td>C2C Fishing</td>
<td> </td>
<td> </td>
<td>John</td>
<td>Doe</td>
<td>C2C Fishing</td>
<td>Enabled</td>
<td>Enabled</td>
</tr>
<tr>
<td>C2C Fishing</td>
<td> </td>
<td> </td>
<td>John</td>
<td>Doe</td>
<td>C2C Fishing</td>
<td>Enabled</td>
<td>Enabled</td>
</tr>
<tr>
<td>C2C Fishing</td>
<td> </td>
<td> </td>
<td>John</td>
<td>Doe</td>
<td>C2C Fishing</td>
<td>Enabled</td>
<td>Enabled</td>
</tr>
<tr>
<td>C2C Fishing</td>
<td> </td>
<td> </td>
<td>John</td>
<td>Doe</td>
<td>C2C Fishing</td>
<td>Enabled</td>
<td>Enabled</td>
</tr>
<tr>
<td>C2C Fishing</td>
<td> </td>
<td> </td>
<td>John</td>
<td>Doe</td>
<td>C2C Fishing</td>
<td>Enabled</td>
<td>Enabled</td>
</tr>
<tr>
<td>C2C Fishing</td>
<td> </td>
<td> </td>
<td>John</td>
<td>Doe</td>
<td>C2C Fishing</td>
<td>Enabled</td>
<td>Enabled</td>
</tr>
<tr>
<td>C2C Fishing</td>
<td> </td>
<td> </td>
<td>John</td>
<td>Doe</td>
<td>C2C Fishing</td>
<td>Enabled</td>
<td>Enabled</td>
</tr>
</tbody>
</table>
</div>
</div>
</body>
</html>