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/
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.
If you love us? You can donate to us via Paypal or buy me a coffee so we can maintain and grow! Thank you!
Donate Us With