Question

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

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

http://jsfiddle.net/mkgBx/

我可以调整thead的宽度以匹配tbody +滚动条的宽度。但是，如果未显示滚动条，则tbody会向右延伸。有没有办法解决tbody宽度？

Answer 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提供滚动和表格以保持设置的宽度。

Answer 2

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

Answer 3

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

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

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

我已修改了您的JSFiddle，以告诉您如何在您的案例中发挥作用。

Answer 4

宽度为100％它适应表格，无论是否有滚动都无关紧要。

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

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

4 个答案: