Mawg Mawg - 7 months ago 59
HTML Question

Colspan spanning 2.5 columns?

I have a table with 5 columns. The final row should have two cells, spaced equally.

Ideally, I would like to use

<td colspan="2.5">
- whats the most elegant way to do this?

The table has a border of 1, so using

<td colspan=2">abc</td>
<td></td>
<td colspan=2">def</td>


looks ugly

Answer

Do you really need two table cells in the bottom row or just two blocks that are half the width of the entire row? If the latter, then you can make a <td colspan="5"> for the final row, put two <div>s in it, float one to the left and the other to the right, and give them width:50%:

<table>
    <tbody>
        <tr>
            <td>1111</td>
            <td>2222</td>
            <td>3333</td>
            <td>4444</td>
            <td>5555</td>
        </tr>
        <tr>
            <td colspan="5">
                <div class="first-half">
                    half
                </div>
                <div class="second-half">
                    half
                </div>
            </td>
        </tr>
    </tbody>
</table>

And some CSS:

.first-half {
    float: left;
    width: 50%;
}
.second-half {
    float: right;
    width: 50%;
}

And the usual jsfiddle: http://jsfiddle.net/ambiguous/mmZEa/

If you do need them to be table cells then you could double the number of horizontal cells, make all the existing ones <td colspan="2">, and then use <td colspan="5" width="50%"> for the two cells in the bottom row: http://jsfiddle.net/ambiguous/JzrLK/

Comments