Logo Questions Linux Laravel Mysql Ubuntu Git Menu
 

Resizing the HTML table width in jQuery

I need to vary a table's width after a click event in jQuery.

HTML:

<table class="zebra" border=0>

Case 1:

$("table.zebra").css("width","600px");

Case 2:

$("table.zebra").css("width","200px");

CSS:

table.zebra{}
table.zebra tr.even td, table.zebra tr.even th { background-color:#FDD017; }
table.zebra tr.odd td { background-color:#FFF380; }

This does not change the table's width like I want.

What am I doing wrong?

like image 838
venkatachalam Avatar asked Apr 05 '09 08:04

venkatachalam


People also ask

How do I change the width of a HTML table?

To manipulate the height or width of an entire table, place the size attribute (either "WIDTH=" or "HEIGHT=") within the <TABLE> code. To manipulate individual cells, place the size attribute within the code for that cell.

How do I shrink the size of a table in HTML?

HTML tables can have different sizes for each column, row or the entire table. Use the style attribute with the width or height properties to specify the size of a table, row or column.

How do I set the width of an element in jQuery?

jQuery width() Method The width() method sets or returns the width of the selected elements. When this method is used to return width, it returns the width of the FIRST matched element. When this method is used to set width, it sets the width of ALL matched elements.


2 Answers

This should do the trick.

<table class="zebra">
  <tr>
    <td>foo</td>
    <td>bar</td>
  </tr>
</table>

<script type="text/javascript">
  $(function() {
    $('table.zebra').attr('width', 500);
  });
</script>
like image 136
William Brendel Avatar answered Oct 06 '22 09:10

William Brendel


Try this:

$("table.zebra").width(200);

Reference: http://docs.jquery.com/CSS/width#val

like image 36
Konstantin Tarkus Avatar answered Oct 06 '22 11:10

Konstantin Tarkus