table出現滾動條對齊的問題
話不多說，直接上程式碼，主要是實時改變table的寬度
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Document</title>
<script type="text/javascript" src="jquery-2.1.1.js"></script>
<style type="text/css">
*{
margin: 0px;
padding: 0px;
}
.sq{
width: 70%;
height: 100px;
overflow: auto;
margin: auto;
}
.tt{
margin: auto;
border-collapse: collapse;
border-spacing: 0;
}
.tt thead tr{
z-index:2;
}
.tt tbody{
}
table{
border-collapse: collapse;
border-spacing: 0;
}
.sh{
width: 70%;
margin: auto;
}
</style>
</head>
<body>
<div class="sh">
<table border="1px" class="ts">
<thead>
<tr>
<th>第一列</th>
<th>第二列</th>
</tr>
</thead>
</table>
</div>
<div class="sq">
<table width="100%" class="tt" border="1px" height="50px">
<tbody>
<tr>
<td width="50%">123</td>
<td width="50%">123</td>
</tr>
<tr>
<td>123</td>
<td>123</td>
</tr>
<tr>
<td>123</td>
<td>123</td>
</tr>
<tr>
<td>123</td>
<td>123</td>
</tr>
<tr>
<td>123</td>
<td>123</td>
</tr>
<tr>
<td>123</td>
<td>123</td>
</tr>
<tr>
<td>123</td>
<td>123</td>
</tr>
<tr>
<td>123</td>
<td>123</td>
</tr>
<tr>
<td>123</td>
<td>123</td>
</tr>
<tr>
<td>123</td>
<td>123</td>
</tr>
<tr>
<td>123</td>
<td>123</td>
</tr>
</tbody>
</table>
</div>
<script type="text/javascript">
//這是關鍵，改變表格的寬度
function t(){
var sw=$(".sq")[0].offsetWidth-$(".sq")[0].scrollWidth;
var tsw=$(".sh")[0].offsetWidth;
var s=tsw-sw;
$(".ts").css({"width":s})
}
setInterval("t()",50);
</script>
</body>
</html>