html - 有没有办法阻止滚动条影响盒模型测量？

Question

我按照 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;
}

这个例子有点大，抱歉。

Answer 1

原始代码 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 版本，以便实际上可以从谷歌服务器找到它......至少有一段时间。)