有没有办法阻止滚动条影响盒模型测量？
我按照 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;
}
这个示例有点大，对此感到抱歉。
如果你对这篇内容有疑问，欢迎到本站社区发帖提问 参与讨论，获取更多帮助，或者扫码二维码加入 Web 技术交流群。
绑定邮箱获取回复消息
由于您还没有绑定你的真实邮箱，如果其他用户或者作者回复了您的评论，将不能在第一时间通知您！
发布评论
评论（1）
原始代码jsfiddle： http://jsfiddle.net/ZhSK6/
这似乎可以解决它：
http://jsfiddle.net/ZhSK6/1/
第二个问题更新：< /strong> http://jsfiddle.net/lollero/ZhSK6/15/
还有一点更简单的示例： http://jsfiddle.net/lollero/ZhSK6/14/
编辑：更新了我的示例。 （更改了 jquery 版本，以便实际上可以从 google 服务器找到它......至少有一段时间。）
Original code jsfiddle: http://jsfiddle.net/ZhSK6/
This seems to solve it:
http://jsfiddle.net/ZhSK6/1/
Update on the secondary problem: http://jsfiddle.net/lollero/ZhSK6/15/
and a little more plain example: http://jsfiddle.net/lollero/ZhSK6/14/
Edit: Updated my examples. ( Changed the jquery version up so that it can actually be found from google servers...for a while at least. )