title: How to add 'style' in dynamically created table?
body: <p>I have created table through DOM, now want to add style to that table but its not working.
  <strong>code :</strong></p>
  
  <pre><code>&lt;script&gt;
      var nrCols=4;
      var maxRows=10;
      var nrRows=maxRows+1;
      while(nrRows&gt;maxRows)
      {
          nrRows=Number(prompt('How many rows? Maximum '+maxRows+' allowed.',''));
      }
      var root=document.getElementById('mydiv');
      var tab=document.createElement('table');
      var style=document.createElement('style');
      style.setAttribute('background-color','red');
      tab.appendChild(style);
  
      tab.setAttribute('Border','1');
  
      tab.className="mytable";
      var tbo=document.createElement('tbody');
  
      var tr1= document.createElement('tr');
      var th1= document.createElement('th');
      th1.appendChild(document.createTextNode('No.'));
  
      var th2= document.createElement('th');
      th2.appendChild(document.createTextNode('Surah.'));
  
      tr1.appendChild(th1);
      tr1.appendChild(th2);
      tbo.appendChild(tr1);
  
      var row, cell;
      for(var i=0;i&lt;nrRows;i++){
          row=document.createElement('tr');
          for(var j=0;j&lt;nrCols;j++){
              cell=document.createElement('td');
              cell.appendChild(document.createTextNode('Allah'+' '+j))
              row.appendChild(cell);
          }
          tbo.appendChild(row);
      }
      tab.appendChild(tbo);
      root.appendChild(tab);
  &lt;/script&gt;
  </code></pre>
  
  <p>i have used <code>style.setAttribute('background-color','red');</code> but no difference. how to fix it ?</p>