Javascript 使用display:block和offsetWidth使表格可滚动

我试图让一个表格体可以滚动，并阅读我发现的问题 我必须应用一个显示：块；加上溢出和桌子主体的固定高度

另外，要设置tbody宽度以匹配thead宽度，我需要设置第一行td的偏移网络宽度

这就是我迄今为止所尝试的：

如您所见，桌子主体占用的空间不正确。。更改偏移网络宽度似乎不是正确的事情，或者我做错了：

$("tbody tr:first-child").find("td").each(function (index) {
    this.offsetWidth = this.style.width;
});

我需要每个人都和他最好的朋友保持一致

有什么想法吗？我做错了什么？

试试这个

}

我建议使用。起初我很怀疑，但现在我什么都用它们。它们支持很多功能，从文件到实体等等。你会喜欢它们的

---

编辑：更不用说它们是免费的，并且在大多数主流浏览器中都可以使用……

标题是：TBODY SCROLLABLE，而不是整个表格你怎么了？TBODY可滚动！！！不是整张桌子，看他妈的DescriptionBody==！=这完全改变了我的表结构，我知道我可以将其拆分为两部分，但我需要找到一种方法，在不拆分表的情况下获得相同的结果。无论如何谢谢你的提示如果我可以的话我会的。。但我不能。不管怎样，谢谢你的建议：老兄，我一直在努力让它在你的小提琴中发挥作用，我很接近，但还没有完全达到，我会让你知道的。但您的选择器选择它肯定是错误的，因为每个语句都指向当前单元格。但我认为你应该参考th的具体指数。让我再试一次：

    <div id="wrap1">
    <table width="100%">
            <tr>
                <th style="width: 20%;">Header one</th>
                <th style="width: 20%;">Header two</th>
                <th style="width: 20%;">Header three</th>
                <th style="width: 20%;">Header four</th>
                <th style="width: 20%;">Header five</th>
            </tr>
    </table>
</div>
<div id="wrap2">
        <table width="100%">
            <tr>
                <td style="width: 20%;">content</td>
                <td style="width: 20%;">content</td>
                <td style="width: 20%;">content</td>
                <td style="width: 20%;">content</td>
                <td style="width: 20%;">content</td>
            </tr>
            <tr>
                <td>content</td>
                <td>content</td>
                <td>content</td>
                <td>content</td>
                <td>content</td>
            </tr>
            <tr>
                <td>content</td>
                <td>content</td>
                <td>content</td>
                <td>content</td>
                <td>content</td>
            </tr>
            <tr>
                <td>content</td>
                <td>content</td>
                <td>content</td>
                <td>content</td>
                <td>content</td>
            </tr>
            <tr>
                <td>content</td>
                <td>content</td>
                <td>content</td>
                <td>content</td>
                <td>content</td>
            </tr>
            <tr>
                <td>content</td>
                <td>content</td>
                <td>content</td>
                <td>content</td>
                <td>content</td>
            </tr>
            <tr>
                <td>content</td>
                <td>content</td>
                <td>content</td>
                <td>content</td>
                <td>content</td>
            </tr>
            <tr>
                <td>content</td>
                <td>content</td>
                <td>content</td>
                <td>content</td>
                <td>content</td>
            </tr>
            <tr>
                <td>content</td>
                <td>content</td>
                <td>content</td>
                <td>content</td>
                <td>content</td>
            </tr>
    </table>
</div>
<div id="output"></div>

#wrap1 {
width: 400px;
height:50px;

#wrap2 {
    width: 417px;
    height:150px;
    overflow-y:auto;
}
#wrap1 tr {
    background:lightblue;
    position:alsolute;
}

#wrap2 tr {
    background: lightgray;
}




$(document).ready(function () {
    $("tbody tr:first-child").find("td").each(function (index) {
        this.offsetWidth = this.style.width;
        $("#output").append("[ #" + (index+1) + " td ] width: " + this.style.width + " | offsetWidth: " + this.offsetWidth + "<br>");

    });
});