Match height of absolute td - css

Question

I am trying to setup a frozen column and the only problem left I have to solve is the heights of the other td's on the same row do not expand to match the height of the absolute positioned td. Since the text in the frozen header is arbitrary, it could span multiple lines. If it weren't absolute positioned then this would force the other td's in that same row to assume the larger height, which is the behavior I would like. But since that first td is absolute, then the heights are no longer linked to the other td's in the same row.
How do I force the other td's in that same row to assume the larger height of the first td?
http://jsfiddle.net/2Wrms/5/
table {
border-collapse: separate;
width: 100%;
table-layout:fixed;
}
td {
margin:0;
}
div.pivot-container {
width: calc(100% - 125px);
overflow-x:scroll;
margin-left:125px;
overflow-y:visible;
}
.headcol {
position:absolute;
width:125px;
left:20px; /*must match padding of outer element*/
top:auto;
}
.long {
width: 230px;
vertical-align:top;
}
<div style="padding-left:20px;">
<div class="pivot-container">
<table>
<tr>
<td class="headcol"> kjgh kj ghkj ghkj gkj g2jhfgjhfg</td>
<td class="long">QWERTJKLZXCVBNM</td>
<td class="long">QWERTYUIOFGHJKLZXCVBNM</td>
<td class="long">QWERTYUVBNM</td>
<td class="long">QWERTYCVBNM</td>
</tr>
<tr>
<td class="headcol">5765765785</td>
<td class="long">QWERTYUIOPXCVBNM</td>
<td class="long">QWERTYCVBNM</td>
<td class="long">QWERTYCVBNM</td>
<td class="long">QWERTYUIOPASDNM</td>
</tr>
</table>
</div>
</div>

Answer 1

You want the other rows to have the same height as the cells in the first column, right? If I understood correctly, you will need to establish the width of the whole table using jQuery, so that the height will change to what you want too.
If you want, for instance, that all rows be no taller than 26px (the height of the cells in the first column), then the table's width can be changed to match this limit by iterating through the rows and checking the height of each, and changing the width accordingly, since just indicating it in the css that all rows should be X height will not work.
$(window).load(function() {
var cont = 0;
var control = false;
var wTable = $("table").width();
do {
cont = 0;
$("tr").each(function() {
h = $(this).height();
if(h > 26) {
cont++;
if(cont == 1) {
return false;
}
}
});
if(cont == 0) {
control = true;
}
else {
wTable = wTable + 200;
$("table").width(wTable);
}
} while(!control);
$("tr").height(26);
});
This way, we're telling the table to add 200px to its width for every row that it finds taller than 26px, and once there are no more, it will stop. At the end of the loop we establish the height one more time in case some rows ended up being shorter than the first column.
You can see the example here, which uses a bit of your original code (I'd recommend testing it directly in your browser, however, since due to JSFiddle's layout it will not display correctly). Hope this helps.

Answer 2

The solution I found was to repeat the content from the absolutely positioned td into the last td of the relative td's. Since I can generate the columns server side, it was easy to repeat the content in another column. I then used css to set `visibility:hidden' on that last td. As long as the width of both that hidden td and the absolute td are the same, then they will have the same height, and those both parts of the row, the absolute and relative, will have the same height.
It has a negative side affect of still taking up space at the end of the table, so it might affect the sizing of outer elements.