javascript - 根据标题宽度设置 html 表格列的宽度

Question

我正在尝试让我的 html 表格与基于 SO Post 的 tbody 的垂直滚动条一起使用.我让滚动条工作但努力动态设置列的宽度。建议的 SO 答案根据 tbody 列的宽度设置标题列的宽度。我想做的恰恰相反。我正在尝试根据标题列宽度设置 tbody 列的宽度(仅限第一行)。

JSfiddle DEMO

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>

Javascript

$(function () {

       // Change the selector if needed
    var $table = $('.mytable'),
        $bodyCells = $table.find('thead tr:nth-child(2) th'),
        colWidth;
    var alertWidth = '';


    // Get the header columns width array
    colWidth = $bodyCells.map(function() {
            var $this = $(this);
        alertWidth += $this.width() + ","; 
        return $this.width();
    }).get();

        alert(alertWidth);

    // Set the width of first row's column
    $table.find('tbody tr:first td').each(function(i, v) {
        //alert(colWidth[i]);
        $(v).width(colWidth[i]);
    });

})

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 不匹配我也尝试过 .css("width") 和 noluck。我

Answer 1

删除 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;
}