I have an HTML table. How can I change the width of one of the cells of that table from Javascript code? For example, I have a button, and when I press it, I want the width of one particular column to be changed. How can I do this?
5
-
Please have a look at this question [here][1]. It answers your question. [1]: stackoverflow.com/questions/8130663/…valentinos– valentinos2013-03-11 01:06:25 +00:00Commented Mar 11, 2013 at 1:06
-
or this: How do I change the column width in a table using JavaScript?static– static2013-03-11 01:06:52 +00:00Commented Mar 11, 2013 at 1:06
-
thank you! Sorry, I didn't saw that question.user1460819– user14608192013-03-11 01:59:54 +00:00Commented Mar 11, 2013 at 1:59
-
This answer helped: stackoverflow.com/questions/8130663/…user1460819– user14608192013-03-11 02:00:48 +00:00Commented Mar 11, 2013 at 2:00
-
You can try clientWidth property as: var tdWidth = document.getElementById('td'); alert(tdWidth.clientWidth); clientWidth returns only numeric part of width, for example, if the width is 50px then it would return 50Sohail xIN3N– Sohail xIN3N2014-11-24 14:40:07 +00:00Commented Nov 24, 2014 at 14:40
Add a comment
|
3 Answers
You could do it without jQuery.
Working example: http://jsfiddle.net/qFDBk/1/
var btn = document.getElementById('btn');
btn.onclick = function() {
var tbl = document.getElementById('tbl');
var td = tbl.rows[0].cells[0];
td.width = '500px';
td.style.backgroundColor = 'blue';
}
1 Comment
Colin Brock
+1 for giving an example that doesn't require jQuery
Here's how you might do it with jQuery, a popular JavaScript library:
$('td:nth-child(2)').css('width', '100px');
Comments
Use CSS method to apply the width.
$('td').css('width','200px');
explanation :
- Get All td Elements. and Apply the CSS property width and set it's value to 200px. for every td element.
$('td')is the tagSelector. it will select all td elements.- .css() will apply the style rules which u mentioned.
