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

Question

我有一个html表，可以进行排序，可调整大小/可移动的列以及固定的标题行。 固定的标头导致标头单元格及其对应的内容单元格断开，因此调整<th>大小不会调整该列中<td>'s大小。 作为一种解决方法，我添加了一些代码来在调整<th>大小时手动更改相关<td>元素的内容宽度。 在大多数情况下，它似乎工作正常，但有时列宽仍无法准确对齐。 我使用chrome dev工具在打one之一期间检查了html，尽管<th>和<td>的width样式都相同，但实际宽度（由$（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

让我首先明确说明我要寻找的行为。 我需要一张桌子，它可以在固定thead的同时垂直滚动tbody溢出。 另外，可以调整列的大小，并且如果列的总大小导致表变得比父容器更宽，则溢出应该可以水平滚动，而不是调整列的宽度以使其不超出其父宽度约束。 话虽这么说，我是从上面使用markup / 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);