How to simulate html table row with multiple columns with one div?

Question

I am making webpage where data from database are put in a table. Each row has 3 columns. I want each row to be clickable however it is not possible since you cannot encapsulate a table row with anchor. There are some solutions around but I want to skip these tricks and use divs as rows. In each div, I can put three floated inline-block divs as columns to get the same result. But is there a way to avoid 3 column-like divs in this example? Just one div for each row with 3 text parts (columns in deed) aligned vertically like in a normal html table? I have desperately tried str_pad in PHP and it solves a different issue.

Answer 1

Mehmed, Try this...

[HTML]

<div id="row1" class="rows">
 <div class="cols col1"></div>
 <div class="cols col2"></div>
 <div class="cols col3"></div>
 <div class="cleaner"></div>
</div><!--end row1-->

<div id="row2" class="rows rowsAlt">
 <div class="col1"></div>
 <div class="col2"></div>
 <div class="col3"></div>
 <div class="cleaner"></div>
</div><!--end row2-->

[CSS]

.cleaner{clear: left; line-height: 0; height: 0;} 
.rows{width: 300px; min-height: 25px;}
.rowsAlt{background-color: blue;}

.cols{height: 100%; float: left;}
.col1{width: 25px;}
.col2{width: 50px;}
.col3{width: 100px;}

Then in JQuery you can just do a click event on the rows class and get it's ID to traverse through it's child elements. This makes the entire row clickable. You can also do somethings with the columns if you'd like.

[JQuery]

$('.rows').live("click", function(){ 
  var thisID = $(this).attr('id');

  alert(thisID);
  //now that you have the id, you can traverse that specific row
});

This should be a good start for you, Mehmed...