Question

我有一个html表，我加注它以允许排序，可调整大小/可移动列和固定标题行。固定标头导致标头单元及其相应的内容单元断开连接，因此调整<th>的大小不会调整该列中<td>'s的大小。作为解决方法，我添加了一些代码，以便在调整<td>大小时手动更改相关<th>元素的内容宽度。它似乎在大多数情况下都能正常工作，但有时列宽仍然没有准确排列。我使用chrome dev工具在其中一个打嗝期间检查html，虽然width和<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);

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

1 个答案: