title: Setting CSS width of HTML <td> element through JavaScript
body: <p>I'm trying to make a progress-bar for each &quot;td&quot; element in a HTML table. The table itself is generated through JavaScript, currently with random placeholder values. I would like each progress-bar to show it's relative percentage to the highest randomly generated value. Please see the image below:</p>
  <p><a href="https://i.stack.imgur.com/YDkBU.png" rel="nofollow noreferrer"><img src="https://i.stack.imgur.com/YDkBU.png" alt="enter image description here" /></a></p>
  <p>Currently what I have done is this:</p>
  <pre><code>// GAMES PLAYED
  const games = Math.floor(Math.random() * 100);
  const td2 = document.createElement(&quot;td&quot;);
  td2.textContent = games;
  td2.innerHTML = games + '&lt;div class=&quot;progress-bar&quot;&gt;&lt;div class=&quot;filled-progress-bar&quot;&gt;&lt;/div&gt;'
  tr.appendChild(td2);
  </code></pre>
  <p>I generate two &quot;div&quot;s, where the grey one you see in the 3rd image is the &quot;.progress-bar&quot;, and the other one that is filled with green is the &quot;.filled-progress-bar&quot;. I then try to set the width of the &quot;.filled-progress-bar&quot; to this:</p>
  <pre><code>// Iterate each sorted rows and add the correct amount of fill
  // Get the lowest and highest value of the sorted row
  const progressBarFirstValue = sortedRows[0].cells[column].textContent;
  const progressBarSecondValue = sortedRows[sortedRows.length-1].cells[column].textContent;
  
  const progressBarMaxValue = (progressBarFirstValue &gt; progressBarSecondValue) ? progressBarFirstValue : progressBarSecondValue;
  
  sortedRows.forEach(function (row) {
      const currentTdElement = row.cells[column];
      tdValue = currentTdElement.textContent;
      
      percentageOfMaxValue = tdValue / progressBarMaxValue * 100;
  
      currentTdElement.style.width = &quot;percentageOfMaxValue%&quot;;
  });
  </code></pre>
  <p>I would like to highlight the last line, where I use the .style.width command:</p>
  <p>currentTdElement.style.width = &quot;percentageOfMaxValue%&quot;;</p>
  <p>This works if I manually insert it into my .css file, but it appears not to work when generated through my JavaScript file above. Is there any chance that some of you can see where I go wrong? Thank you so much for your time!</p>