For reasons which are somewhat unavoidable (lots of legacy code, patibility, design needs) I have the following problem: I have two tables, one directly below the other, but split between two frames (see the pseudo-example below my sig.). I need the column widths of these tables to synchronize exactly so that these two tables 'act' like one. The reason being to have a 'header' table which will not scroll above a 'data' table which can scroll.
Now there are a few obvious suggestions which don't (yet) work.
First, I have heard that by using CSS there is a way to put a scrollbar just on the table rows, not the table header, which is the intended effect here. Unfortunately, this is not a viable option due to the reasons mentioned above.
Second, percentage width formatting on the columns. Unfortunately the scrollbar will mess this up, and this solution also shares a problem with the next possible solution: pixel width formatting. Here, if there is column content that is extra wide these widths (px or %) will be overridden in one table but not the other, and one mismatching width will break -all- the vertical alignments. Apparently correcting this with a CSS 'max-width' does not seem to work.
The final possible solution is using some sort of Javascript and DOM to dynamically force the issue. Here forcing a min-width on each column and forcing bottom widths to override the top widths would be sufficient. Still, the ability to actually split a table in two while having them share the same column/row model would be pretty neat to. Hopefully this solution is feasable and not extremely plicated (pardon my present lack of knowledge RE Javascript/DOM).
Thanks,
Skolem
<!-- In frame 1 (top, non-scrolling): -->
<table id="t1" ...> (Just the header, really)
<tr>
<td>Name</td><td>User Image</td><td>Email</td><td>Favorite Language</td>
</tr>
</table>
<!-- In frame 2 (bottom, scrolling): -->
<!-- table "t2" intended to have equal column widths -->
<table id="t2" ...> (Data below the header)
<tr>
<!-- Lots of crazy stuff of wildly varying widths -->
<td>...</td><td>...</td><td>...</td><td>...</td>
</tr>
</table>
For reasons which are somewhat unavoidable (lots of legacy code, patibility, design needs) I have the following problem: I have two tables, one directly below the other, but split between two frames (see the pseudo-example below my sig.). I need the column widths of these tables to synchronize exactly so that these two tables 'act' like one. The reason being to have a 'header' table which will not scroll above a 'data' table which can scroll.
Now there are a few obvious suggestions which don't (yet) work.
First, I have heard that by using CSS there is a way to put a scrollbar just on the table rows, not the table header, which is the intended effect here. Unfortunately, this is not a viable option due to the reasons mentioned above.
Second, percentage width formatting on the columns. Unfortunately the scrollbar will mess this up, and this solution also shares a problem with the next possible solution: pixel width formatting. Here, if there is column content that is extra wide these widths (px or %) will be overridden in one table but not the other, and one mismatching width will break -all- the vertical alignments. Apparently correcting this with a CSS 'max-width' does not seem to work.
The final possible solution is using some sort of Javascript and DOM to dynamically force the issue. Here forcing a min-width on each column and forcing bottom widths to override the top widths would be sufficient. Still, the ability to actually split a table in two while having them share the same column/row model would be pretty neat to. Hopefully this solution is feasable and not extremely plicated (pardon my present lack of knowledge RE Javascript/DOM).
Thanks,
Skolem
<!-- In frame 1 (top, non-scrolling): -->
<table id="t1" ...> (Just the header, really)
<tr>
<td>Name</td><td>User Image</td><td>Email</td><td>Favorite Language</td>
</tr>
</table>
<!-- In frame 2 (bottom, scrolling): -->
<!-- table "t2" intended to have equal column widths -->
<table id="t2" ...> (Data below the header)
<tr>
<!-- Lots of crazy stuff of wildly varying widths -->
<td>...</td><td>...</td><td>...</td><td>...</td>
</tr>
</table>
First, set the t1's width to t2's width. Then, take every td from t1, and set its width matching the widths of t2's columns.
Try this proof of concept: http://jsfiddle/HqpGp/.
You will need jQuery, and modify it to work with frames, but i think it's a good start. I'm pretty sure the JS part could be written in a nicer way, though.
Hope it helps!
I couldn't get the accepted answer to work directly, so I reworked it a bit, just in case it doesn't work for anyone else.
$('.table1 tr:eq(1) td').each(function (i) {
var _this = $(this);
$('.table2 tr:eq(1) td:eq(' + i + ')').width(_this.width());
});