title: How do I use Javascript or jQuery to set the width of <th> elements?
body: <p>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: </p>
  
  <pre><code>cell2.style.width="150px";
  cell3.style.width="210px";
  cell4.style.width="400px";
  cell5.style.width="150px";
  </code></pre>
  
  <p>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:</p>
  
  <pre><code>&lt;th id="top1"&gt;Name&lt;/th&gt;
  &lt;th id="top2"&gt;Type&lt;/th&gt;
  &lt;th id="top3"&gt;Subject&lt;/th&gt;
  &lt;th id="top4"&gt;Target(s)&lt;/th&gt;
  </code></pre>
  
  <p><strong><a href="https://jsfiddle.net/Lance_Bitner/d19bdrdw/" rel="nofollow noreferrer">Fiddle Example</a></strong></p>
  
  <p>How do I give the same width values I have in the table body, to the <code>&lt;th&gt;</code> 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 <code>!important</code>.</p>