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

Question

我试图让我的html表使用垂直滚动条为tbody基于所以波斯特。我使滚动条正常工作，但很难动态地设置列的宽度。建议的SO应答根据tbody列的宽度设置标头列的宽度。我想做完全相反的事。我试图根据标题列的宽度设置tbody列的宽度(仅限于第一行)。

JSfiddle演示

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的td属性与相应的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;
}