Question

Is it possible with CSS to change the appearance of a normal table like this:

+-----------+-----------+
| Row1Cell1 | Row1Cell2 |
+-----------+-----------+
| Row2Cell1 | Row2Cell2 |
+-----------+-----------+
| Row3Cell1 | Row3Cell2 |
+-----------+-----------+
| Row4Cell1 | Row4Cell2 |
+-----------+-----------+
| Row5Cell1 | Row5Cell2 |
+-----------+-----------+
| Row6Cell1 | Row6Cell2 |
+-----------+-----------+

Into this:

+-----------+-----------+-----------+-----------+
| Row1Cell1 | Row1Cell2 | Row2Cell1 | Row2Cell2 |
+-----------+-----------+-----------+-----------+
| Row3Cell1 | Row3Cell2 | Row4Cell1 | Row4Cell2 |
+-----------+-----------+-----------+-----------+
| Row5Cell1 | Row5Cell2 | Row6Cell1 | Row6Cell2 |
+-----------+-----------+-----------+-----------+

What I want to do is render two (or perhaps even three) <tr>s on the same visual row.
I would like to accomplish this without using javascript if possible.

regards Oskar

Answer 1

If you don’t know how wide your <tr>s are you can use this:

HTML

<table>
    <tbody>
        <tr>
            <td>1 1</td>
            <td>1 2</td>
        </tr>
        <tr>
            <td>2 1</td>
            <td>2 2</td>
        </tr>
        <tr>
            <td>3 1</td>
            <td>3 2</td>
        </tr>
        <!-- more stuff here -->
    </tbody>
</table>

CSS

tr {
    float: left;
}

tr:nth-child(3n+1) {
    clear: left;
}

It lets the <tr>s float but breaks every now and then. You can control when this happens using the :nth-child-selector. In this case (:nth-child(3n+1)) it breaks after every third row. Using 2n+1 breaks after every second row and finally n+1 brings back your original order from the beginning. I hope this helps.

Demo

Try before buy

^{A note: I tested this in Safari, Chrome and Firefox but not in IE – didn’t have time to start the VM.}

PS: If you know how wide your <tr>s are you can do it just with tr { float: left; } and by setting the overall width of the table so that 1, 2 or 3 rows would have enough space horizontally.