I need to vary a table
's width after a click event in jQuery.
<table class="zebra" border=0>
$("table.zebra").css("width","600px");
$("table.zebra").css("width","200px");
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?
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.
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.
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.
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>
Try this:
$("table.zebra").width(200);
Reference: http://docs.jquery.com/CSS/width#val
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