How Keep Two Tables Aligned When Page Width Is Reduced? - html

Question

I've got a little webpage I've been working on for the fun of it, but there is an undesired result.
There are 2 tables that by default show up with the columns aligned, as I desire. They both have 100% page width, and the cells within share the same specified width. The final cell does not have a width specified so that it can expand if the page width is increased thus keeping the table at 100% of the page width. No heights are specified so cells can grow infinitely if needed.
Table 1:
<!-- box_sorting -->
<table style="z-index:2;position:fixed;top:196px;margin-top:0px;margin-left:auto;margin-right:auto;margin-bottom:0px;width:100%;min-width:1200px;background-color:#CCC;text-align:center;vertical-align:middle;font:12px Arial, Helvetica, sans-serif;color:#333;word-wrap:break-word;border-top:solid;border-left:solid;border-size:1px;border-color:#CCC" align="center" cellpadding="0" cellspacing="0">
<tr>
<td width="75">Track</td>
<td width="300">Song</td>
<td width="300">Album Artist</td>
<td width="300">Album</td>
<td width="100">Genre</td>
<td width="75">Rating</td>
<td>Comments</td>
</tr>
</table>
Table 2:
<!-- box_tracklisting -->
<table style="z-index:1;position:relative;top:216px;margin-top:0px;margin-left:auto;margin-right:auto;width:100%;min-width:1200px;text-align:center;vertical-align:middle;font:12px Arial, Helvetica, sans-serif;color:#333;word-wrap:break-word;border-left:solid;border-size:1px;border-color:#CCC" align="center" cellpadding="0" cellspacing="0">
<tr>
<td width="75">1 of 11</td>
<td width="300">Believer</td>
<td width="300">American Authors</td>
<td width="300">Oh, What A Life</td>
<td width="100">Indie</td>
<td width="75">Good</td>
<td></td>
</tr>
The problem I'm having is that if the browser width decreases the top table shrinks too much, and no longer aligns with the bottom table. How can I prevent this?
How It Looks Normally:
How It Looks When Browser Window Width Is Reduced:
I'm using Mozilla Firefox, but I would prefer an answer that is compatible with the 5 major browsers: Internet Explorer, Mozilla Firefox, Google Chrome, Opera, and Safari. The page is optomized for viewing at a width of greater than 1200px. If you view it with a browser window of less than that there will be a horizontal scrollbar.

Answer 1

I think the best thing for this would be to utilise a jQuery plugin called DataTables
I've put some of your data into a dummy table so you can see how it works. Note the HTML is in order of 1,2,3,1,2,3 but the default load is to sort numerically, ie 1,1,2,2,3,3. There are loads of options to explore with DataTables; you could turn off the sorting feature, or give each track an index number.
http://jsfiddle.net/kDvp5/
For the sake of links going down in future, the example this is based off: http://www.datatables.net/examples/basic_init/scroll_y.html
HTML:
<table id="example" class="display" cellspacing="0" width="100%">
<thead>
<tr>
<th>Name</th>
<th>Position</th>
<th>Office</th>
<th>Age</th>
<th>Start date</th>
<th>Salary</th>
</tr>
</thead>
<tfoot>
<tr>
<th>Name</th>
<th>Position</th>
<th>Office</th>
<th>Age</th>
<th>Start date</th>
<th>Salary</th>
</tr>
</tfoot>
<tbody>
<tr>
<td>Tiger Nixon</td>
<td>System Architect</td>
<td>Edinburgh</td>
<td>61</td>
<td>2011/04/25</td>
<td>$320,800</td>
</tr>
<tr>
<td>Garrett Winters</td>
<td>Accountant</td>
<td>Tokyo</td>
<td>63</td>
<td>2011/07/25</td>
<td>$170,750</td>
</tr>
</tbody>
</table>
JS:
$(document).ready(function() {
$('#example').dataTable( {
"scrollY": "200px",
"scrollCollapse": true,
"paging": false
} );
} );

Answer 2

Yeah, I would NOT use two separate tables and stick to the traditional layout using TH header. If you want it to be fixed, just set the position to fixed:
<tr style="position: fixed;">
<th width="75">Track</th>
<th width="300">Song</th>
<th width="300">Album Artist</th>
<th width="300">Album</th>
<th width="100">Genre</th>
<th width="75">Rating</th>
</tr>
<tr>
<td width="75">1 of 11</td>
<td width="300">Believer</td>
<td width="300">American Authors</td>
<td width="300">Oh, What A Life</td>
<td width="100">Indie</td>
<td width="75">Good</td>
<td></td>
</tr>

Answer 3

However many tables you wish to use, the "width" attribute is deprecated. You can use a colgroup instead for both tables:
<colgroup>
<col style="width: 75px;" />
<col style="width: 300px;" />
<col style="width: 300px;" />
<col style="width: 300px;" />
<col style="width: 100px;" />
<col style="width: 75px;" />
<col />
</colgroup>
Add the colgroup to the beginning of each table, between <table> tag and your first <tr>. Should work uniformly across all browsers. You can also use CSS classes and assign column widths for both tables simultaneously, which would make changing them later on much easier.
In your HTML, in both tables:
<table>
<colgroup>
<col class="col1" />
<col class="col2" />
<col class="col3" />
<col class="col4" />
<col class="col5" />
<col class="col6" />
<col />
</colgroup>
<tr>
<etc....>
Then, in your CSS:
.col1 { width: 75px; }
.col2 { width: 300px; }
.col3 { width: 300px; }
.col4 { width: 300px; }
.col5 { width: 100px; }
.col6 { width: 75px; }
... should get you what you need.