java java - 5 months ago 20
CSS Question

Line up two table columns to each other

Is it possible to line up these two tablecolums so cell 1a is in line with cell 2a? As it is right now the outer left column seem to be vertically centered to the outer right column

Further down is the source (html) and then a screenshot



<table>
<tr>
<td>
<table class="payment">
<tr>
<td> <input type="checkbox"></td>
<td>info (1a)</td>
</tr>
<tr>
<td></td>
<td> descr ...</td>
</tr>
</table>
<table class="payment">
<tr>
<td> <input type="checkbox"></td>
<td>info (1b)</td>
</tr>
<tr>
<td></td>
<td> descr ...</td>
</tr>
</table>
<table class="payment">
<tr>
<td> <input type="checkbox"></td>
<td>info (1c)</td>
</tr>
<tr>
<td></td>
<td> descr ...</td>
</tr>
</table>
</td>

<!-- OUTER COLUMN 2 -->
<td>
<table class="payment">
<tr>
<td> <input type="checkbox"></td>
<td>info (2a)</td>
</tr>
<tr>
<td></td>
<td> decr ...</td>
</tr>
</table>
<table class="payment">
<tr>
<td> <input type="checkbox"></td>
<td>info (2b)</td>
</tr>
<tr>
<td></td>
<td> descr ...</td>
</tr>
</table>
<table class="payment">
<tr>
<td> <input type="checkbox"></td>
<td>info (2c)</td>
</tr>
<tr>
<td></td>
<td> descr ...</td>
</tr>
</table>
<table class="payment">
<tr>
<td> <input type="checkbox"></td>
<td>info (2d)</td>
</tr>
<tr>
<td></td>
<td> descr ...</td>
</tr>
</table>
</td>
</tr>
</table>





image
enter image description here

Answer

Straight html add valign=top to you first tr:

<table>
    <tr valign=top> 
        <td>

        <table class="payment"> 
            <tr>
                <td> <input type="checkbox"></td>
                <td>info (1a)</td>
            </tr>
            <tr>

That is, unless something in the class="payment" style is effecting the positioning