Logo Questions Linux Laravel Mysql Ubuntu Git Menu
 

Is it possible to alternate rowspans?

Tags:

html

I guess this schema of what i am trying to do will be more descriptive than the question itself.

+------------------------+-----------------------+
|                        |                       |
+                        +-----------------------+
|                        |                       |
+------------------------+                       +
|                        |                       |
+                        +-----------------------+
|                        |                       |
+------------------------+-----------------------+
|                        |                       |
+------------------------+-----------------------+

As you can see, i am trying to create a 2 column table where at some point it should be able to rowspan one of the columns, and eventually the other over the next 2 rows.

Am i missing some obvious way of doing it, or some advanced table tag/attribute? Or there is just no way of doing that using tables?

I am aware that it is possible to achieve that using other ways, but tables are what i am interested in, and what is the question about.

For reference: There are some things i've tried and didn't succeed http://jsfiddle.net/dbtYk/

like image 417
NoBBy Avatar asked Jun 11 '12 11:06

NoBBy


Video Answer


1 Answers

Unless I've missed something, here is an example based on your jsfiddle

<table>
    <tr style="height:20px;">
        <td rowspan="2">left</td>   
        <td>right</td>
    </tr>
    <tr style="height:20px;">
        <td rowspan="2">right</td>   
    </tr>
    <tr style="height:20px;">
        <td rowspan="2">left</td>   
    </tr>
    <tr style="height:20px;">
        <td>right</td>   
    </tr>
    <tr>
        <td>left</td>   
        <td>right</td>   
    </tr>
</table>

UPDATE

As pointed out by Cicada the above unfortunately doesn't work in Chrome.

UPDATE 2

As pointed out by Alohci, adding a height makes it work in Chrome. The above has been amended to reflect that, along with a new jsfiddle.

like image 76
freefaller Avatar answered Oct 14 '22 13:10

freefaller