Question

我按照imaputz.com中描述的方式制作了一张桌子，但行的颜色交替出现。由于这些颜色，行颜色和表格周围的颜色存在明显差异，并且由于tbody的右边缘没有需要滚动条，因此表格看起来很糟糕与thead的右边缘对齐（也有与周围背景不同的颜色）。

我现在的想法是：如果我能以某种方式阻止侧边栏影响其包含元素的布局（以便滚动条可能重叠其包含的元素），我可以稍微填充行以确保滚动条永远不会重叠重要的东西。 / p>

有没有办法实现这种滚动条行为，最好没有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版本，以便实际上可以从谷歌服务器找到...至少一段时间。）

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

1 个答案: