这种避免复杂代码和布局的常见技巧是简单地固定除最后一列之外的所有列的宽度。最后一列将自动调整,您根本不必担心滚动条。
这是一个 jsfiddle 示例以及一些示例 html/css,以向您展示我的意思。需要注意的是,除了最后一列之外,所有列都必须具有宽度(它们不能是百分比)。
jsfiddle 示例
CSS:
.container {
width: 500px;
border: 1px solid red;
}
.content-wrapper {
overflow: auto;
height: 75px;
}
table {
width: 100%;
border-collapse: collapse;
}
col {
width: 100px;
}
col:last-child {
width: auto;
}
.container td {
border: 1px solid green;
}
HTML:
<div class="container">
<div class="header-wrapper">
<table class="header">
<colgroup>
<col/>
<col/>
<col/>
<col/>
<col/>
</colgroup>
<tr>
<td>Column A</td>
<td>Column B</td>
<td>Column C</td>
<td>Column D</td>
<td>Column E</td>
</tr>
</table>
</div>
<div class="content-wrapper">
<table class="content">
<colgroup>
<col/>
<col/>
<col/>
<col/>
<col/>
</colgroup>
<tr>
<td>Row 1/A</td>
<td>Row 1/B</td>
<td>Row 1/C</td>
<td>Row 1/D</td>
<td>Row 1/E</td>
</tr>
<tr>
<td>Row 2/A</td>
<td>Row 2/B</td>
<td>Row 2/C</td>
<td>Row 2/D</td>
<td>Row 2/E</td>
</tr>
<tr>
<td>Row 3/A</td>
<td>Row 3/B</td>
<td>Row 3/C</td>
<td>Row 3/D</td>
<td>Row 3/E</td>
</tr>
<tr>
<td>Row 4/A</td>
<td>Row 4/B</td>
<td>Row 4/C</td>
<td>Row 4/D</td>
<td>Row 4/E</td>
</tr>
<tr>
<td>Row 5/A</td>
<td>Row 5/B</td>
<td>Row 5/C</td>
<td>Row 5/D</td>
<td>Row 5/E</td>
</tr>
</table>
</div
</div>