View Single Post
Old 01-07-2011, 10:34 PM   #6
frabjous
Wizard
frabjous can solve quadratic equations while standing on his or her head reciting poetry in iambic pentameterfrabjous can solve quadratic equations while standing on his or her head reciting poetry in iambic pentameterfrabjous can solve quadratic equations while standing on his or her head reciting poetry in iambic pentameterfrabjous can solve quadratic equations while standing on his or her head reciting poetry in iambic pentameterfrabjous can solve quadratic equations while standing on his or her head reciting poetry in iambic pentameterfrabjous can solve quadratic equations while standing on his or her head reciting poetry in iambic pentameterfrabjous can solve quadratic equations while standing on his or her head reciting poetry in iambic pentameterfrabjous can solve quadratic equations while standing on his or her head reciting poetry in iambic pentameterfrabjous can solve quadratic equations while standing on his or her head reciting poetry in iambic pentameterfrabjous can solve quadratic equations while standing on his or her head reciting poetry in iambic pentameterfrabjous can solve quadratic equations while standing on his or her head reciting poetry in iambic pentameter
 
frabjous's Avatar
 
Posts: 1,213
Karma: 12890
Join Date: Feb 2009
Location: Amherst, Massachusetts, USA
Device: Sony PRS-505
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>&nbsp;</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>
frabjous is offline   Reply With Quote