1
我需要你的幫助。使標題行和表格數據與水平滾動條一致移動
如何修改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>
@jhonSmith今天，我想我們會一起努力。這是我在短短20分鐘內給你的第二個答案:)：D – Sachin 2013-03-08 21:58:11