Question

I have an html table that I souped up to allow for sorting, resizable/movable columns, and a fixed header row. The fixed header caused a disconnect in the header cells and their corresponding content cells so that resizing the <th> did not resize the <td>'s in that column. As a work-around, I added some code to manually change the width of the content of the relevant <td> elements when the <th> is resized. It seems to work fine in most cases, but sometimes the column widths still don’t line up exactly. I used chrome dev tools to examine the html during one of the hiccups, and although the width style on both the <th> and <td> is the same, the actual width ( as returned by $(elt).width() ) was 3px less than the specified width for the <th>. Does anyone know what might cause this?

EDIT: I realized that this only happens when I resize the columns so that the total width of the table is larger than the parent div. The content cells overflow and allow me to scroll horizontally, but the <thead> stays its fixed width and adjusts some of the <th> elements smaller to compensate.

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

Markup:

<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

Let me first clarify exactly the behavior I was looking for. I needed a table that would allow scrolling vertically of the tbody overflow while having a fixed thead. In addition, columns could be resized, and if the total size of the columns causes the table to become wider than the parent container, the overflow should be scrollable horizontally rather than adjusting the column widths to stay within their parent width constraints. That being said, I accomplished it using my markup/css from above, but I used javascript to explicitly increase the width of the table when a column is resized such that the total width of the columns is now greater than the viewing area.

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