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

我有一个html表，我增强了它，以允许排序、可调整大小/可移动的列和一个固定的标题行。固定标题导致标题单元格与其相应的内容单元格断开连接，因此调整

的大小不会调整该列中

的大小。作为解决方法，我添加了一些代码，以便在调整
大小时手动更改相关
元素内容的宽度。在大多数情况下，它似乎工作正常，但有时列宽仍然不完全对齐。在其中一次打嗝期间，我使用chrome开发工具检查html，尽管
和
上的
宽度样式相同，但实际宽度（由$（elt）.width（）返回）比
的指定宽度小3倍。有人知道这是什么原因吗

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

CSS:

标记：

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


#交易
列表值
mgmtId
大小和
8,113              
4RAJA-SUN空
10,831,124,369                  
19,048,548                  
首先让我澄清一下我想要的行为。我需要一个表，允许在有固定thead的情况下垂直滚动tbody溢出。此外，可以调整列的大小，如果列的总大小导致表比父容器宽，则溢出应该可以水平滚动，而不是调整列宽以保持在其父宽度约束内。也就是说，我使用上面的标记/css完成了这项工作，但是当一列的大小调整到现在列的总宽度大于查看区域时，我使用javascript显式地增加了
表的宽度

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

var cols=this.$el.find（“tbody>tr:first td”）；
var newWidth=1；
对于（变量i=0；i
这就是原因：您的表格有边距和填充。我检查了td和th上的填充，它们都是相同的（4px 5px）。请参阅文章中的编辑，我缩小了问题的范围。“固定标题导致标题单元格与其对应的内容单元格断开连接”，这就是元素的用途。您可以使用它们来定义列的宽度。
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);