无论滚动条是否存在，如何使 tbody 宽度固定？答案

【问题标题】：How to make tbody width fixed regardless of scrollbar presence?无论滚动条是否存在，如何使 tbody 宽度固定？
【发布时间】：2013-11-04 22:43:09
【问题描述】：

thead{
width: calc(100% - 17px);
display:block;
}

tbody{
display:block;
overflow-y: auto;
height:100px;
}

http://jsfiddle.net/mkgBx/

我可以调整thead 的宽度以匹配tbody + 滚动条的宽度。但是，在不显示滚动条的情况下，tbody 会进一步向右延伸。有什么办法可以固定tbody的宽度吗？

【问题讨论】：

标签： html css

【解决方案1】：

我不认为你可以设置 tbodys 的宽度来忽略滚动条的存在。是否可以接受对标记结构的更改？

CSS

table{
    font: 11px arial;
    width: 245px;
}
th, td{
    border:1px solid #000;
}
div {
    height:90px;
    width: 262px; /*table width + 17px */
    overflow-y: auto;    
}

HTML

<table>
    <thead>
        <tr>
            <th style="width:165px">Name</th>
            <th>Country</th>
        </tr>
    </thead>
</table>
<div>
    <table>
        <tbody>
            <tr>
                <td style="width:165px">Mart Poom</td>
                <td>Estonia</td>
            </tr>
            <tr>
                <td>David Loria</td>
                <td>Kazakhstan</td>
            </tr>
            <tr>
                <td>Wojciech Szczęsny</td>
                <td>Poland</td>
            </tr>
            <tr>
                <td>Gianluigi Buffon</td>
                <td>Italy</td>
            </tr>
            <tr>
                <td>Igor Akinfeev</td>
                <td>Russia</td>
            </tr>
        </tbody>
    </table>
</div>

http://jsfiddle.net/nF2NL/1/

这允许 div 提供滚动并且表格保持设置的宽度。

【讨论】：

非常感谢！它可以工作，但我还需要在 Javascript 中进行大量更改才能解决此问题。

【解决方案2】：

您需要使用 JavaScript 来处理这个问题。检查是否出现滚动条并相应调整 tbody 的宽度。

这是与此相关的 JS 代码，其中 t 是 tbody 元素：

if (t.clientHeight == t.scrollHeight)
{
    t.style.width = "224px";
}

我已经修改了您的 JSFiddle，以向您展示它如何在您的情况下发挥作用。

【讨论】：

太棒了！谢谢@Chirag64！

【解决方案3】：

我不会为您的表明确声明<tbody> 和<thead> 标签，因为这是不必要的。解决您的问题的一种方法是使 <th>s 的行 (<tr>) 位置：固定。其他人在这里遇到了类似的问题：How to make a tables header static when scrolling

【讨论】：

【解决方案4】：

宽度为 100% 时，它适应表格，不管它是否有滚动条。

thead{
    width: 100%;
    display:block;
}

【讨论】：