I am trying to resize <td> elements using the jquery .width() method.
By default here is how one of the <td> elements looks like:
<td> <!-- computed width = 105px -->
With firebug, when I for instance use .width(171) I can see that the style of the element gets modified:
<td style="171px;"> <!-- computed width = 148.767px -->
however it looks like jquery somehow doesn’t have enough space to resize the <td> element completely.
Question 1a: shouldn’t the document/table width be increased automatically for the resizing of the element to be completed?
Question 1b: is there a way to force the resizing of <td> elements to make sure the new computed width will match the value set?
When reviewing the documentation for the .width() method, I saw that:
–.width() gets “the current computed width for the first element in the set of matched elements.”
–.width( value ) sets “the CSS width of each element in the set of matched elements.”
Question 2: why are the setter and the getter methods inconsistent, shouldn’t .width( value ) modify the DOM width directly instead of modifying the CSS “width” attribute?
Question 2: why are the setter and the getter methods inconsistent, shouldn't.width( value ) modify the DOM width directly instead of modifying the CSS
"width" attribute?
This is because the jQuery object doesn’t know if the DOMElement that it is operating on has a width attribute defined in W3.org. Not all DOMElements have the width attribute, But all have the CSS width property that can be set. SO to maintain standards it sets the width attribute in css rather than creating a new attribute(violating w3 standards) that is inexistant for certain DOMElements.