Question

Is there a simple HTML way to accomplish the following? I have a table which contains rows of 3 td‘s each. Items are added to the table at the top, so it is sorted in reverse order. See below:

<table>
    <tr>
        <td>7</td>
        <td>6</td>
        <td>5</td>
    </tr>
    <tr>
        <td>4</td>
        <td>3</td>
        <td>2</td>
    </tr>
    <tr>
        <td>1</td>
        <td></td>
        <td></td>
    </tr>
</table>

Now, when the time comes for me to add 8 to the top of my table, obviously I must do a lot of editing to the page rather than just add one new line. I’d like to do something like:

<table>
    <tr max-cells-before-wrap="3">
        <td>7</td>
        <td>6</td>
        <td>5</td>
        <td>4</td>
        <td>3</td>
        <td>2</td>
        <td>1</td>
    </tr>
</table>

But I’m not sure if it’s possible in HTML. I could write a simple JS function to do it, but basic HTML would be even cooler.

Answer 1

you could always try something like this…

<table width="200">
<tr>
<td>
<div style="float:left; width: 33%">7</div>
<div style="float:left; width: 33%">6</div>
<div style="float:left; width: 33%">5</div>
<div style="float:left; width: 33%">4</div>
<div style="float:left; width: 33%">3</div>
<div style="float:left; width: 33%">2</div>
<div style="float:left; width: 33%">1</div>
</td>
</tr>
</table>

and just add

<div style="float:left; width: 33%">8</div>

right before 7