javascript - 为什么我的 <th> 上的实际宽度小于指定的 CSS 宽度？

Question

我有一个 html 表格，我对其进行了改进以允许排序、可调整大小/可移动的列和固定的标题行。固定标题导致标题单元格与其相应的内容单元格断开连接，因此调整了 <th> 的大小。没有调整 <td>'s 的大小在该专栏中。作为变通方法，我添加了一些代码来手动更改相关 <td> 内容的宽度。 <th> 时的元素调整大小。在大多数情况下它似乎工作正常，但有时列宽仍然没有完全对齐。我使用 chrome 开发工具在其中一个问题期间检查了 html，尽管 width <th> 上的风格和 <td>相同，实际 宽度(由 $(elt).width() 返回)比 <th> 的指定宽度小 3px .有谁知道这可能是什么原因造成的？

编辑: 我意识到只有当我调整列大小时表格的总宽度大于父 div 时才会发生这种情况。内容单元格溢出并允许我水平滚动，但是 <thead>保持其固定宽度并调整一些 <th>元素较小以进行补偿。

CSS:

.blotter {
    overflow-y: hidden;
    overflow-x: auto;
    position: relative;
    border-left: solid thin silver;
}

.blotter-table {
    table-layout: fixed;
    margin-bottom: -1px;
}

tbody {
    height: 400px;
    max-height: 400px; 
    overflow: auto;
}

thead>tr,tbody {
    display: block;
}

td>div {
    overflow: hidden;
}

标记:

<div class="blotter">
    <table class="table table-bordered table-hover table-condensed blotter-table">
        <thead>
            <tr>
                <th id="tradeaggregation_numTrades" draggable="true" style="width: 422px; cursor: pointer; opacity: 1;"># Trades<img src="resources/img/down_arrow.png" class="pull-right" id="imgSort" style="opacity: 1; cursor: e-resize;"></th>
                <th id="tradeaggregation_listValues" draggable="true" style="width: 305px; cursor: pointer; opacity: 1;">List Values</th>
                <th id="tradeaggregation_mgmtId" draggable="true" style="width: 66px; opacity: 1; cursor: e-resize;">mgmtId</th>
                <th id="tradeaggregation_sizeSum" draggable="true" style="width: 78px; cursor: pointer; opacity: 1;">Size Sum</th>      
            </tr>
        </thead>
        <tbody>         
            <tr id="tradeaggregation0">             
                    <td><div id="tradeaggregation0_0" style="overflow: hidden; width: 422px;">8,113</div></td>              
                    <td><div id="tradeaggregation0_1" style="overflow: hidden; width: 305px;">4RAJA-SUN null </div></td>                    
                    <td><div id="tradeaggregation0_2" style="overflow: hidden; width: 66px;">10,831,124,369</div></td>                  
                    <td><div id="tradeaggregation0_3" style="overflow: hidden; width: 78px;">19,048,548</div></td>                  
            </tr>
        </tbody>
    </table>
</div>

Answer 1

让我首先明确说明我正在寻找的行为。我需要一个表格，该表格允许垂直滚动 tbody 溢出，同时具有固定的 thead。此外，可以调整列的大小，如果列的总大小导致表格变得比父容器宽，溢出应该可以水平滚动，而不是调整列宽以保持在父容器的宽度限制内。也就是说，我使用上面的标记/css 完成了它，但是我使用 javascript 在调整列大小时显式增加 table 的宽度，使得列的总宽度现在更大比可视区域。

var cols = this.$el.find("tbody>tr:first td");
var newWidth = 1;
for ( var i = 0; i < cols.length; i++) {
    newWidth += $(cols[i])[0].offsetWidth;
}
var minWidth = $(this.$el.find(".blotter")[0]).width(); // parent div
if (newWidth < minWidth) newWidth = minWidth;
this.$el.find("table").width(newWidth);