1

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

编辑：我意识到这只发生在我调整列大小以使表格的总宽度大于父 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>
4

1 回答 1

0

让我首先准确地澄清我正在寻找的行为。我需要一个表格，允许垂直滚动 tbody 溢出，同时有一个固定的标题。此外，列可以调整大小，如果列的总大小导致表变得比父容器宽，溢出应该是水平滚动的，而不是调整列宽以保持在其父宽度限制内。话虽如此，我使用上面的标记/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);
于 2012-12-14T17:52:41.610 回答