代碼如下：
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>ScrollBar</title>
<style type="text/css">
table, th,td{
border: #555555 2px solid;
}
table{
border-collapse: collapse;
width: 300px;
}
#tb2,tr,td{
border-top:none;
}
th,td{
width: 100px;
}
.tbcontainer{
height: 180px;
width: 317px;
overflow-y: auto;
}
</style>
</head>
<body>
<table>
<thead>
<tr>
<th></th>
<th>變更前</th>
<th>變更后</th>
</tr>
</thead>
<tbody>
</tbody>
</table>
<div class="tbcontainer">
<table id="tb2">
<tbody>
<tr>
<td>編程語言</td>
<td>Hello Cobol!</td>
<td>Hello Java</td>
</tr>
<tr>
<td>編程語言</td>
<td>Hello Cobol!</td>
<td>Hello Java</td>
</tr>
<tr>
<td>編程語言</td>
<td>Hello Cobol!</td>
<td>Hello Java</td>
</tr>
<tr>
<td>編程語言</td>
<td>Hello Cobol!</td>
<td>Hello Java</td>
</tr>
<tr>
<td>編程語言</td>
<td>Hello Cobol!</td>
<td>Hello Java</td>
</tr>
<tr>
<td>編程語言</td>
<td>Hello Cobol!</td>
<td>Hello Java</td>
</tr>
<tr>
<td>編程語言</td>
<td>Hello Cobol!</td>
<td>Hello Java</td>
</tr>
<tr>
<td>編程語言</td>
<td>Hello Cobol!</td>
<td>Hello Java</td>
</tr>
<tr>
<td>編程語言</td>
<td>Hello Cobol!</td>
<td>Hello Java</td>
</tr>
</tbody>
</table>
</div>
</body>
</html>
效果如下：
問題：
為何tbody的第一列比th的第一列往左偏移了一個像素呢？
初學者，肯定各位大俠指教
uj5u.com熱心網友回復：
table 的 width: 304px;因為要包含中間兩條豎線
uj5u.com熱心網友回復：
可是表頭中間也有豎線呀
uj5u.com熱心網友回復：
走過路過幫忙看看唄
uj5u.com熱心網友回復：
就是兩table個都設定 width: 304px;
uj5u.com熱心網友回復：
建議直接放到一個table里不就沒這事兒了
uj5u.com熱心網友回復：
放到一個table里怎么實作表頭固定主體又能滾動呢？轉載請註明出處，本文鏈接：https://www.uj5u.com/qianduan/85681.html
標籤：HTML(CSS)