Mathlight
Mathlight

Reputation: 6653

HTML table td's not properly alignt

I'm having an weird problem. I've got an table with an input and some text. Only problem is that 1 row is shorter than the others.

I've moved the row down, but that also didn't work. I've also compared them with the other rows, but i can't find the difference.

An image says more than thousands words they say, so here's an screen pick from the live testing area: enter image description here

Also, here's an JSFiddle of the relevant code.

And here's the code also:

<table class="radio">
    <tbody>
        <tr class="highlight">
            <td>
                <input type="radio" name="shipping_method" value="pickup.pickup0" id="shipping_method_pickup" />
            </td>
            <td colspann="3"><b>Hello</b>
            </td>
            <td style="text-align: right;">
                <label for="pickup.pickup1">0,00</label>
            </td>
        </tr>
        <tr class="highlight">
            <td>
                <input type="radio" name="shipping_method" value="weight.weight_5" id="weight.weight_5" checked="checked" />
            </td>
            <td colspan="3"><b>Verzending op gewicht</b>

            </td>
            <td style="text-align: right;">
                <label for="weight.weight_5">2,20</label>
            </td>
        </tr>
        <tr class="highlight">
            <td>
                <input type="radio" name="shipping_method" value="weighttat.weighttat_5" id="weighttat.weighttat_5" />
            </td>
            <td colspan="3"><b>Verzending via Post.nl</b>

            </td>
            <td style="text-align: right;">
                <label for="weighttat.weighttat_5">6,75</label>
            </td>
        </tr>
        <tr class="highlight">
            <td>
                <input type="radio" name="shipping_method" value="dhlpickup.dhlpickup_5" id="dhlpickup.dhlpickup_5" />
            </td>
            <td colspan="3"><b>Verzenden via DHL Afhaalservice ( Kies <a href="http://www.selektvracht.nl/?spl=y" target="_tab">hier</a> een DHL afhaalpunt </b>

            </td>
            <td style="text-align: right;">
                <label for="dhlpickup.dhlpickup_5">4,50</label>
            </td>
        </tr>
    </tbody>
</table>

Upvotes: 0

Views: 50

Answers (2)

ahmetunal
ahmetunal

Reputation: 3950

You have a small spelling error

An extra n in colspann

Upvotes: 2

Cirou
Cirou

Reputation: 1430

Your first row's attribute colspan is wrong, change:

<td colspann="3"><b>Hello</b>

with:

<td colspan="3"><b>Hello</b>

Here is the fiddle updated: http://jsfiddle.net/D5fJa/1/

More info about colspan attribute: http://www.w3schools.com/tags/att_td_colspan.asp

Upvotes: 1

Related Questions