0

I want to make table cells responsive - even squares filling all available space(window). If table width is 100% - it takes all available space, distributing cells evenly but only horizontally. I have written small javascript with jquery, calling this function on window resize event:

function windowReszie(){
 $("td").each(function(){
    $(this).css({"height":$(this).width()});
  })
}

But this approach is slow, because I have a lot of cells - is there a way to do it just with css or any other better , faster way? enter image description here

bukowski
  • 1,893
  • 7
  • 34
  • 54

2 Answers2

1

I see some problem with your approach, you're computing the width for every cell.

I'd do something along the lines of 

function windowReszie(){
  var size =$("td").width();
  $("td").height(size);
}

Another approach would be to set a class and change the css rule associated with the class, but that could be a bit tricky (see : Changing a CSS rule-set from Javascript)

Community
  • 1
  • 1
Py.
  • 3,499
  • 1
  • 34
  • 53
  • Cool, it worked perfectly, for some reason I thought that jquery would only apply this to first found `td` not all of them – bukowski Apr 25 '13 at 07:15
  • Well the tricky thing is that for css property (e.g. `.css`, `.width` and `.height`) the function used to read reads only the first element whereas the set sets if for every element. – Py. Apr 25 '13 at 07:21
1

try adding class only at first <td> in <tr> and then loop over that class... no need to check every <td> item.

Davor Mlinaric
  • 1,989
  • 1
  • 19
  • 26
  • Yours works too - thanks, but @Py gave a code example as welll - If I could I would accept both of your answers. – bukowski Apr 25 '13 at 07:13