The good news is that this issue has a solution.
The concept is simple enough… the columns in a continuous table will be the same width from top to bottom.
The problem with your layout is that the table is not continuous. The page is made up of a number of tables stacked together.
.
The solution is to make the outer table continuous by putting those odd tables into a row within the main table as nested tables, like this:
<tr>
<td colspan="12"> <!-- NOTE colspan here -->
<table class="thirtynineheader">
<tr>
<td>ED Letter Code</td>
<td>NTIB</td>
<td>Borough, U.D. or R.D.</td>
<td>Ashton U Lyne</td>
<td>Registration District<br>and Sub District</td>
<td>468/2</td>
</tr>
</table>
</td>
</tr>
The main table is className “table1939”; there should only be ONE of these tables. The “odd” tables that presently interrupt the main table have className “thirtynineheader”. They should be added to a row within the main table. The table-cell in that row should be given the attribute colspan=“12” so the nested table can expand to the full width of the parent table.
Please copy this file to your PC and open it in your browser. When you look at the code in your editor, please notice how little CSS is required to create this layout. No IDs, no columns, not much of anything.
(The lines in my example were taken from varous locations within your file and do not necessarily group together.)
cell-width-continuity.html (7.5 KB)
The bad news is that you are repeating some errors in your CSS that should have been resolved three years or ago.
#table-7 tr, th, td {-moz-border-bottom-colors: none;}
#table-4 tr, th, td {-moz-border-bottom-colors: none;}
.table-6 td, th, td {border: 1px solid black;}
.table-5 td, th, td {border: 1px solid black;}
.table-2 td, th, td {border: 1px solid black;}
#table-3 tr, th, td {-moz-border-bottom-colors: none;}
...
Most td and th elements are being targeted globally, not specifically. I grabbed a few lines to illustrate the problem.
That first line above actually says:
#table-7 tr {-moz-border-bottom-colors: none;}
th {-moz-border-bottom-colors: none;}
td {-moz-border-bottom-colors: none;}
The “tr” is being addressed specifically, but the “th” and “td” are being addressed globally.
If you wanted to address the th and td elements within a specific parent element (table), you should address them in this manner:
#table-7 tr, #table-7 th, #table-7 td {...}
I would imagine that you can get rid of the IDs in your code that were added in error.
Hope this is helpful.