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

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;
}

---

第二个问题更新：< /strong> http://jsfiddle.net/lollero/ZhSK6/15/

还有一点更简单的示例： http://jsfiddle.net/lollero/ZhSK6/14/

---

_{编辑：更新了我的示例。 （更改了 jquery 版本，以便实际上可以从 google 服务器找到它......至少有一段时间。）}