Rowspan upwards

user_1181387 0
Viewed 5598

I'm trying to program a javascript timeline, in which you click on the left column revealing something in the right column. I suppose there are easier ways to do this, but the HTML below looks really really neat.

So the usual way rowspan works is that you have a td that you want to extend down a few rows to complete the table.

<tr>
    <td>1942</td>
    <td rowspan=2>Something happened</td>
</tr>
<tr>
    <td>2017</td>
</tr>

However, what if I want to rowspan upwards, so that the below timeline item fills both rows?

<tr>
    <td>1942</td>
</tr>
<tr>
    <td>2017</td>
    <td rowspan=2>Something else happened</td>
</tr>

I know I can just move them all to the top row and rowspan from there, but I really want to have this nice, easy-to-edit format, with dates and rows right next to each other.

(An idea I had was that if you think of rowspan as analogous to css width and height, there might be something analogous to css left and top (like "table-row"?) you could set, other than actually moving the td's to the tr you want. I don't think that exists, though.)

(also, does anyone know if negative rowspan is defined?)

html-table html
2 Answers

I know this is an old question, but I was looking for this myself and this is the first result on google. After a bit of tweaking, I’ve managed to find a solution:

<table>
    <thead>
        <tr>
            <td>Column 1/<td>
            <td>Column 2</td>
        </tr>
    </thead>
    <tbody>
        <tr>
            <td rowspan=2>A1</td>
            <!--This cell must be hidden; otherwise you will see a gap at the top of the second column between the header and body-->
            <td style=“padding:0px;” />
        </tr>
        <tr>
            <td rowspan=3>A</td>
        </tr>
        <tr>
            <td>A2</td>
        </tr>
        <tr>
            <td>A3</td>
        </tr>
    </tbody>
</table>

You might have to experiment a bit if you want to have a hierarchy deeper than 2 columns, but I’m confident it’s possible.

user_116807700
Related