Question

Hi I am trying to simulate the rowspan property on css using divs and tags, so it can be changed on a:active = double height, but at the moment it grows from two rows to three rows.

It only works when the first column its expanded, if I expand the second, third, etc then it would grow to three rows.

Here its the sample code that works, and it remains in two rows.

<div style="float:left;width:750px;text-align:center;height:30px;">

   <a href="#" style="float:left;width:149px;height:30px;">1</a>
   <a href="#" style="float:left;width:149px">2</a>
   <a href="#" style="float:left;width:149px">3</a>
   <a href="#" style="float:left;width:149px">4</a>
   <a href="#" style="float:left;width:149px;">5</a>

   <a href="#" style="float:left;width:149px">1</a>
   <a href="#" style="float:left;width:149px">1</a>
   <a href="#" style="float:left;width:149px">1</a>
   <a href="#" style="float:left;width:149px">1</a>
</div>

But If I do the following :

<div sytle="width:750px;text-align:center;height:30px;float:left">
<!--Row 1---->
   <a href="#" style="float:left;width:149px">1</a>
   <a href="#" style="float:left;width:149px;height:30px;">2</a>
   <a href="#" style="float:left;width:149px">3</a>
   <a href="#" style="float:left;width:149px">4</a>
   <a href="#" style="float:left;width:149px;">5</a>
<!--Row 2---->
   <a href="#" style="float:left;width:149px">1</a>
   <a href="#" style="float:left;width:149px">1</a>
   <a href="#" style="float:left;width:149px">1</a>
   <a href="#" style="float:left;width:149px">1</a>
 </div>

Then it would grow to three rows.

What I am trying to do its a two row tabs, so when you select the one at the top it would expand the row to indicate that its been selected.

Because there are 5 elements at the top and 4 in the bottom, when you select the one at the top its when it needs to expand taking the space of the missing element below.

Answer 1

Using javascript (and jQuery) will let you use the easier to understand — and semantically appropriate — rowspan and colspan attributes of table cells.

jQuery is very easy to learn! And you’ll find lots of help here on Stackoverflow 🙂