thead{
width: calc(100% - 17px);
display:block;
}
tbody{
display:block;
overflow-y: auto;
height:100px;
}
http://jsfiddle.net/mkgBx/
我可以调整头的宽度以匹配 tbody + 滚动条的宽度。但是,在不显示滚动条的情况下,tbody 会进一步向右延伸。有没有办法修复身体宽度?
我认为您无法将正文宽度设置为忽略滚动条的存在。改变加价结构是否可以接受?
.CSS
table{
font: 11px arial;
width: 245px;
}
th, td{
border:1px solid #000;
}
div {
height:90px;
width: 262px; /*table width + 17px */
overflow-y: auto;
}
.HTML
<table>
<thead>
<tr>
<th style="width:165px">Name</th>
<th>Country</th>
</tr>
</thead>
</table>
<div>
<table>
<tbody>
<tr>
<td style="width:165px">Mart Poom</td>
<td>Estonia</td>
</tr>
<tr>
<td>David Loria</td>
<td>Kazakhstan</td>
</tr>
<tr>
<td>Wojciech Szczęsny</td>
<td>Poland</td>
</tr>
<tr>
<td>Gianluigi Buffon</td>
<td>Italy</td>
</tr>
<tr>
<td>Igor Akinfeev</td>
<td>Russia</td>
</tr>
</tbody>
</table>
</div>
http://jsfiddle.net/nF2NL/1/
这允许div 提供滚动,并且表格保持设定的宽度。
你需要使用 JavaScript 来处理这个问题。检查滚动条是否出现并相应地调整正文的宽度。
这是与此相关的JS代码,其中t是tbody元素:
if (t.clientHeight == t.scrollHeight)
{
t.style.width = "224px";
}
我已经修改了您的JSFiddle,以向您展示它如何在您的情况下工作。
我不会明确声明表的<tbody>
和<thead>
标签,因为这是不必要的。解决您的问题的一种方法是使<th>
位置的行(<tr>
)固定。其他人在这里也有类似的问题:如何在滚动时使表头静态
宽度为100%,它可以适应表格,无论它是否有滚动
。thead{
width: 100%;
display:block;
}