Question

我正在尝试基于default argument promotion为tbody使用垂直滚动条的html表。我使滚动条正常工作，但是努力地动态设置列的宽度。建议的SO答案根据tbody列的宽度设置标题列的宽度。我想做相反的事情。我试图根据标题列的宽度设置tbody列的宽度（仅第一行）。

SO Post

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，则width的{{1}}属性与相应的td不匹配我也尝试过th，但也没有问题。我

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

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

1 个答案: