How do I use Javascript or jQuery to set the width of <th> elements?

Question

I have a website that is dynamically pulling information, setting the column widths in JavaScript. I set the widths of the table body columns like this:

cell2.style.width="150px";
cell3.style.width="210px";
cell4.style.width="400px";
cell5.style.width="150px";

It works fine for setting up the body, but they do not line up with the table headers. The table headers are static and since the body is dynamic they are not lining up. Below is the static header:

<th id="top1">Name</th>
<th id="top2">Type</th>
<th id="top3">Subject</th>
<th id="top4">Target(s)</th>

Fiddle Example

How do I give the same width values I have in the table body, to the <th> seen above and in my jsfiddle? I need to use JavaScript or jQuery, because it is a dynamic table and does not listen to my CSS commands, no matter what I add; not even !important .

Answer 1

You don't need jquery - just CSS - this will style even dynamic content.

 table { border-collapse: collapse; } table, th, td { border: 1px solid black; text-align:left } #tableTest th:nth-child(1), #tableTest td:nth-child(1) {width:150px} #tableTest th:nth-child(2), #tableTest td:nth-child(2) {width:210px} #tableTest th:nth-child(3), #tableTest td:nth-child(3) {width:400px} #tableTest th:nth-child(4), #tableTest td:nth-child(4) {width:150px} 

 <table id='tableTest'> <tr> <th id="top1">Name</th> <th id="top2">Type</th> <th id="top3">Subject</th> <th id="top4">Target(s)</th> </tr> <tr> <td id="cell1">1</td> <td id="cell2">2</td> <td id="cell3">3</td> <td id="cell4">4</td> </tr> </table> 

Answer 2

Table Header th has an attribute width which can be used for width. If you want to do it with JS or JQuery. You can do it like

document.getElementById('top1').setAttribute('width', '10%');

OR

$('#top1').attr('width', '10%');

Answer 3

You can get the id selectors in jQuery and use the width() method to set the width of every th :

Updated FIDDLE .

$('#top1').width(100);
$('#top2').width(200);
$('#top3').width(300);
$('#top4').width(100);

Or using css() :

$('#top1').css('width', '100px');
$('#top2').css('width', '200px');
$('#top3').css('width', '300px');
$('#top4').css('width', '100px');

Or in JS you can use:

document.getElementById('#top1').style.width = '100px';
document.getElementById('#top2').style.width = '200px';
document.getElementById('#top3').style.width = '300px';
document.getElementById('#top4').style.width = '100px';

Answer 4

just use jQuery if you are using it.

 var data = [{ name : "Test 1", type:"type1", subject:"subject1", targer:"target1" }, { name : "Test 2222222222", type:"type2", subject:"subject122222", targer:"target2" }, { name : "Test 3333333", type:"type13", subject:"subject3", targer:"target3333333" }]; $(document).ready(function(){ $('#top1').css('width','150px'); $('#top2').css('width','210px'); $('#top3').css('width','400px'); $('#top4').css('width','150px'); var table = $("#notificationMgmtTableBody"); data.forEach(function(item){ var tr = $("<tr>"); Object.keys(item).forEach(function(k){ var td = $("<td>"); td.text(item[k]); tr.append(td); }); table.append(tr); }); }); 

 <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> <div id="queryMgmt" style="height: 400px"> <table id="notificationMgmtTable" class="table table-bordered table-hover jupiterTable"> <thead id="notificationMgmtTableHead" style="width: 100%"> <tr style="background-color: rgba(204, 204, 204, .7); color: #003366; width: 100%"> <th id="top1">Name</th> <th id="top2">Type</th> <th id="top3">Subject</th> <th id="top4">Target(s)</th> </tr> </thead> <tbody id="notificationMgmtTableBody"> </tbody> </table> </div> 

Answer 5

Can you not just select the element by ID:

$('#top1').css('width','150px');

sorry my mistake.... it's early and the end of the week!

?

Answer 6

Working fiddle

Since you're using jQuery you could use .css() method :

$('#top1').css('width','150px');
$('#top2').css('width','210px');
$('#top3').css('width','400px');
$('#top4').css('width','150px');

Hope this helps.

 $('#top1').css('width','150px'); $('#top2').css('width','210px'); $('#top3').css('width','400px'); $('#top4').css('width','150px'); 

 <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> <div id="queryMgmt" style="height: 400px"> <table id="notificationMgmtTable" border=1 class="table table-bordered table-hover jupiterTable"> <thead id="notificationMgmtTableHead" style="width: 100%"> <tr style="background-color: rgba(204, 204, 204, .7); color: #003366; width: 100%"> <th id="top1">Name</th> <th id="top2">Type</th> <th id="top3">Subject</th> <th id="top4">Target(s)</th> </tr> </thead> <tbody id="notificationMgmtTableBody"> <tr> <td>Name 1</td> <td>Type 1</td> <td>Subject 1</td> <td>Target(s) 1</td> </tr> </tbody> </table> </div> 

Answer 7

To show a jQuery approach although as above - it is not required. You can set the desired widths into an array and then using jQuery - assign them to the th's and td's.

 $(document).ready(function(){ var widths = [150,210,400,150]; $('#tableTest th, #tableTest td').each(function(idx){ $(this).css('width',widths[idx]+'px'); }) }) 

 table { border-collapse: collapse; } table, th, td { border: 1px solid black; text-align:left } 

 <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> <table id='tableTest'> <tr> <th id="top1">Name</th> <th id="top2">Type</th> <th id="top3">Subject</th> <th id="top4">Target(s)</th> </tr> <tr> <td id="cell1">1</td> <td id="cell2">2</td> <td id="cell3">3</td> <td id="cell4">4</td> </tr> </table>