It occurred to me that the inner tables seem to be doing all the work here, and that it would probable be fine to remove the outer table and replace its rows with divs. And that seems to work just fine, even with using percentage widths, rather than absolute widths, and it removes the need for nested tables. I tested in Firefox, Chromium and Opera. What do you think?
The CSS:
Code:
div.formrow {
width: 100%;
margin: 0px;
padding: 0px;
}
table {
border-collapse: collapse;
}
td {
white-space: nowrap;
padding: 0px;
}
table.whole {
width: 100%;
margin: 0px;
}
table.half {
width: 50%;
display: inline-block;
}
table.quarter {
width: 25%;
display: inline-block;
}
td.fill {
width: 100%;
border-bottom: solid 2pt black;
}
The (X)HTML:
Code:
<div class="formrow">
<table class="half"><tr>
<td>Naam</td>
<td class="fill"></td>
</tr></table><!--
--><table class="quarter"><tr>
<td>Geslacht</td>
<td class="fill"></td>
</tr></table><!--
--><table class="quarter"><tr>
<td>Leeftijd</td>
<td class="fill"></td>
</tr></table>
</div>
<div class="formrow">
<table class="whole"><tr>
<td>Verlangd soort werk</td>
<td class="fill"></td>
</tr></table>
</div>
<div class="formrow">
<table class="whole"><tr>
<td>Plaatselijk adres</td>
<td class="fill"></td>
</tr></table>
</div>
<div class="formrow">
<table class="whole"><tr>
<td>Geboorteplaats</td>
<td class="fill"></td>
</tr></table>
</div>
<div class="formrow"><td> </div>
<div class="formrow">Namen van de ouders:</div>
<div class="formrow">
<table class="half"><tr>
<td>Vader</td>
<td class="fill"></td>
</tr></table><!--
--><table class="half"><tr>
<td>Adres</td>
<td class="fill"></td>
</tr></table>
</div>
<div class="formrow">
<table class="half"><tr>
<td>Moeder</td>
<td class="fill"></td>
</tr></table><!--
--><table class="half"><tr>
<td>Adres</td>
<td class="fill"></td>
</tr></table>
</div>
<div class="formrow">
<table class="half"><tr>
<td>Beroep van vader</td>
<td class="fill"></td>
</tr></table><!--
--><table class="half"><tr>
<td>Moeder</td>
<td class="fill"></td>
</tr></table>
</div>
<div class="formrow">
<table class="half"><tr>
<td>Geboorteplaats vader</td>
<td class="fill"></td>
</tr></table><!--
--><table class="half"><tr>
<td>Moeder</td>
<td class="fill"></td>
</tr></table>
</div>