Javascript 设置html表格列'；基于页眉宽度的页眉宽度

我正试图使我的html表基于以下内容使用垂直滚动条

tbody

。我让滚动条工作，但很难动态设置列的宽度。建议的SO答案是根据tbody列的宽度设置标题列的宽度。我想做完全相反的事情。我试图根据标题列宽设置tbody列的宽度（仅第一行）

html

<table class="table mytable">
    <thead>
        <tr>
            <th style="border-top:2px solid #ddd"></th>
            <th colspan="4" style="text-align:center;border-left:1px solid #ddd;border-right:1px solid #ddd;border-top:2px solid #ddd">Group 1</th>
            <th colspan="4" style="text-align:center;border-left:1px solid #ddd;border-right:1px solid #ddd;border-top:2px solid #ddd">Group 2</th>
            <th style="border-top:2px solid #ddd">Group 3</th>
        </tr>
        <tr>
            <th style="width:200px">Col 1</th>
            <th style="width:150px;border-left:1px solid #ddd">Col 2</th>
            <th style="width:150px">Col 3</th>
            <th style="width:150px" class="td-md">Col 4</th>
            <th style="width:150px">Col 5</th>            
            <th style="width:150px;border-left:1px solid #ddd">Col 6</th>
            <th style="width:150px">Col 7</th>
            <th style="width:150px">Col 8</th>
            <th style="width:150px">Col 9</th>
            <th style="width:150px;border-left:1px solid #ddd">Col 10</th>
        </tr>
    </thead>
    <tbody>
        <tr>
            <td>A12345</td>
            <td>1254</td>
            <td>200</td>
            <td>43243</td>
            <td>432</td>
            <td>4323</td>
            <td>4324</td>
            <td>434</td>
            <td>4343244</td>
            <td>4343244</td>
        </tr>
        <tr>
            <td>A12345</td>
            <td>1254</td>
            <td>200</td>
            <td>43243</td>
            <td>432</td>
            <td>4323</td>
            <td>4324</td>
            <td>434</td>
            <td>4343244</td>
            <td>4343244</td>
        </tr>
        <tr>
            <td>A12345</td>
            <td>1254</td>
            <td>200</td>
            <td>43243</td>
            <td>432</td>
            <td>4323</td>
            <td>4324</td>
            <td>434</td>
            <td>4343244</td>
            <td>4343244</td>
        </tr>
        <tr>
            <td>A12345</td>
            <td>1254</td>
            <td>200</td>
            <td>43243</td>
            <td>432</td>
            <td>4323</td>
            <td>4324</td>
            <td>434</td>
            <td>4343244</td>
            <td>4343244</td>
        </tr>
        <tr>
            <td>A12345</td>
            <td>1254</td>
            <td>200</td>
            <td>43243</td>
            <td>432</td>
            <td>4323</td>
            <td>4324</td>
            <td>434</td>
            <td>4343244</td>
            <td>4343244</td>
        </tr>        
    </tbody>
</table>

css

 thead, tbody {
        display: block;
    }

    tbody {
        height: 100px; /* Just for the demo          */
        overflow-y: auto; /* Trigger vertical scroll    */
        overflow-x: hidden; /* Hide the horizontal scroll */
    } 

问题
这里的问题是jquery的

width（）

函数返回的值与在

th

上设置的值不同。如果我在浏览器中检查html，

td

的

width

属性与相应的

th

不匹配

---

我也尝试过使用noluck的

.css（“宽度”）

。I

删除java脚本并用以下内容替换所有css：

table ,tr td{
    border:1px solid red
}
tbody {
    display:block;
    height:200px;
    overflow:auto;
}
thead, tbody tr {
    display:table;
    width:100%;
    table-layout:fixed;/* even columns width , fix width of table too*/
}
thead {
    width: calc( 100% - 1em )/* scrollbar is average 1em/16px width, remove it from thead width */
}
table {
    width:400px;
}

---

根据你的建议，我不会让垂直滚动条更新我的答案，并添加了创建垂直滚动条的代码，这将把滚动条添加到整个表格中，而不仅仅是针对tbody。您可能需要检查，以便OPthead中的链接不会滚动，但tbody会滚动，或者可能会滚动，您也应该注意这一点。

table ,tr td{
    border:1px solid red
}
tbody {
    display:block;
    height:200px;
    overflow:auto;
}
thead, tbody tr {
    display:table;
    width:100%;
    table-layout:fixed;/* even columns width , fix width of table too*/
}
thead {
    width: calc( 100% - 1em )/* scrollbar is average 1em/16px width, remove it from thead width */
}
table {
    width:400px;
}