我按照 imaputz.com 中描述的方式制作了一张表格，但行的颜色交替。由于这些颜色，行颜色和表格周围的颜色存在明显差异，并且当自 tbody 右边缘以来需要滚动条的行很少时，表格看起来很糟糕> 没有与 thead 的右边缘对齐(它的颜色也不同于周围的背景)。
我现在的想法是: 如果我能以某种方式阻止侧边栏影响其包含元素的布局(这样滚动条就有可能与它的某些包含元素重叠)，然后我可以稍微填充行以确保滚动条永远不会与重要的东西重叠。
有没有办法实现这种滚动条行为，最好不用 Javascript？
例子:
<div id="list">
<table>
<thead>
<tr>
<th>
DATUM
</th>
<th>
TID
</th>
<th>
TEMPERATUR
</th>
<th>
STATUS
</th>
<th>
ÅTGÄRD
</th>
</tr>
</thead>
<tbody>
<tr class="odd row0">
<td>
2011 09 22
</td>
<td>
04:39
</td>
<td>
-264.2
</td>
<td>
</td>
<td>
Antibiotika behandling
</td>
</tr>
<tr class="even row1">
<td>
2011 09 22
</td>
<td>
04:36
</td>
<td>
-264.2
</td>
<td>
</td>
<td>
Under behandling
</td>
</tr>
<tr class="odd row2">
<td>
2011 09 21
</td>
<td>
19:29
</td>
<td>
-264.2
</td>
<td>
Förhöjd
</td>
<td>
</td>
</tr>
<tr class="even row3">
<td>
2011 09 21
</td>
<td>
19:29
</td>
<td>
-273.2
</td>
<td>
Förhöjd
</td>
<td>
</td>
</tr>
<tr class="odd row4">
<td>
2011 09 21
</td>
<td>
19:29
</td>
<td>
-270.2
</td>
<td>
Förhöjd
</td>
<td>
</td>
</tr>
<!-- Uncomment to get scrollbars
<tr class="even row5">
<td>
2011 09 21
</td>
<td>
19:29
</td>
<td>
-273.2
</td>
<td>
Förhöjd
</td>
<td>
</td>
</tr>
<tr class="odd row6">
<td>
2011 09 21
</td>
<td>
19:29
</td>
<td>
-270.2
</td>
<td>
Förhöjd
</td>
<td>
</td>
</tr>
<tr class="even row7">
<td>
2011 09 21
</td>
<td>
19:29
</td>
<td>
-273.2
</td>
<td>
Förhöjd
</td>
<td>
</td>
</tr>
<tr class="odd row8">
<td>
2011 09 21
</td>
<td>
19:28
</td>
<td>
-272.2
</td>
<td>
Förhöjd
</td>
<td>
</td>
</tr>
<tr class="even row9">
<td>
2011 09 21
</td>
<td>
19:28
</td>
<td>
-262.2
</td>
<td>
Förhöjd
</td>
<td>
</td>
</tr>
<tr class="odd row10">
<td>
2011 09 21
</td>
<td>
19:28
</td>
<td>
-268.2
</td>
<td>
Förhöjd
</td>
<td>
</td>
</tr>
<tr class="even row11">
<td>
2011 09 21
</td>
<td>
19:28
</td>
<td>
-273.2
</td>
<td>
Förhöjd
</td>
<td>
</td>
</tr>
<tr class="odd row12">
<td>
2011 09 21
</td>
<td>
19:28
</td>
<td>
-269.2
</td>
<td>
Förhöjd
</td>
<td>
</td>
</tr>
<tr class="even row13">
<td>
2011 09 21
</td>
<td>
19:27
</td>
<td>
-270.2
</td>
<td>
Förhöjd
</td>
<td>
</td>
</tr>
-->
</tbody>
<tfoot>
</tfoot>
</table>
</div>
CSS:
#list {
width:60%;
float:left;
}
#list table {
font-weight:normal;
border-collapse:collapse;
text-align:center;
font-size:smaller;
}
#list table thead tr {
display:block;
position:relative;
}
#list table, #list th, #list td
{
border:1px solid white;
}
#list table tr td,
#list table tr th
{
width:65px;
}
#list table tr td + td,
#list table tr th + th
{
width:40px;
}
#list table tr td + td + td,
#list table tr th + th + th
{
width:100px;
}
#list table tr td + td + td + td,
#list table tr th + th + th + th
{
width:80px;
}
#list table tbody tr td + td + td + td + td
{
width:150px;
}
/* The last column header is a special case, to compensate for
the scrollbar's width, which would otherwise offset the
columns a bit to the left. */
#list table thead tr th + th + th + th + th
{
width:166px;
}
#list th {
background-color:#E5E5E5;
}
#list .odd
{
background-color:#E5E5E5;
}
#list .even
{
background-color:#CBCBCB;
}
#list table tbody {
display:block;
overflow:auto;
height:206px;
}
这个例子有点大，抱歉。
最佳答案
原始代码 jsfiddle:http://jsfiddle.net/ZhSK6/
这似乎解决了这个问题: http://jsfiddle.net/ZhSK6/1/
#list table thead tr th + th + th + th + th
{
width:166px;
}
次要问题更新: http://jsfiddle.net/lollero/ZhSK6/15/
还有一个更简单的例子:http://jsfiddle.net/lollero/ZhSK6/14/
<子> 编辑:更新了我的示例。 (更改了 jquery 版本，以便实际上可以从谷歌服务器找到它......至少有一段时间。)
关于html - 有没有办法阻止滚动条影响盒模型测量？，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/7511002/