jQuery: How to overwrite tables width?

Question

I have the table that goes like this: <table style="width:375pt">. How can I overwrite its width to 50%? I need to select just this one table with this width and not other tables on the page. So the question is how to select the table with specific width?

Thank you.

Answer 1

Style attributes can be directly set with the css() method:

$("table").css("width", "50%");

As for how to restrict it to a certain table, you won't be able to (easily) query the one with width 375px (although that can partially be done with an attribute selector).

The typical approach is to give the relevant table an ID or a class or use the CSS selectors in other ways to restrict it to the relevant table(s).

For example:

<table id="mytable" style="width:375px;">

with:

$("#mytable").css("width", "50%");

Answer 2

$("table.classname").css("width","50%");

<table class="classname" style="width:375pt">

Oops, didn't read the "one table in the page" statement. Still works though.

Answer 3

$("table").each(function(){
  if($(this).css('width') == '375px')
  {
     $(this).css('width', '50%');
  }
});