title: Center the top th in a html table
body: <p>I have an html table which the content is gathered from an API using Javascript. I'm trying to center the text in the top row of my html table(the table is in a modal window) and it just won't center. It always stays in the left side.</p>
  
  <p><div class="snippet" data-lang="js" data-hide="false" data-console="true" data-babel="false">
  <div class="snippet-code">
  <pre class="snippet-code-js lang-js prettyprint-override"><code>if (data.foods) {
    //here is the top row-&gt;  var div = "&lt;tr&gt;&lt;th&gt;" + data.foods[0].food.desc.name + "&lt;/th&gt;&lt;/tr&gt;" + "&lt;tr&gt;&lt;td&gt;Nutrition Facts&lt;/th&gt;&lt;td&gt;per 100gr&lt;/td&gt;&lt;/tr&gt;";
    data.foods[0].food.nutrients.map(nutrients =&gt; {
          let tableList = "&lt;tr&gt;&lt;td&gt;" + nutrients.name + ": " + "&lt;/td&gt;&lt;td&gt;" + nutrients.value + nutrients.unit + "&lt;/td&gt;&lt;/tr&gt;";
          div += tableList;
          nutrientData.innerHTML = div;
          //modal 
          var modal = document.getElementById("modal");
          var span = document.getElementsByClassName("close")[0];
          modal.style.display = "block";
          span.onclick = function() {
            modal.style.display = "none";
          }</code></pre>
  <pre class="snippet-code-css lang-css prettyprint-override"><code>/* modal content-box */
  
  .modal-content {
    background-color: #fefefe;
    margin: 10% auto;
    padding: 10px;
    border: 1px solid #888;
    width: 20vw;
    height: 70%;
    box-shadow: 0 0 20px 0 rgba(0, 0, 0, 0.2), 0 5px 5px 0 rgba(0, 0, 0, 0.24);
    text-align: center;
    overflow: scroll;
  }
  
  .modal-content table {
    table-layout: fixed;
    border-spacing: 1;
    border-collapse: collapse;
    text-align: center;
    height: 100%;
    width: 100%;
    border: solid 2px red;
    line-height: 1.35;
  }
  
  .modal-content tr,
  .modal-content td {
    border: solid 0.5px black;
  }</code></pre>
  <pre class="snippet-code-html lang-html prettyprint-override"><code>&lt;div class="modal-content"&gt;
    &lt;span class="close"&gt;&amp;times;&lt;/span&gt;
    &lt;table id="nutrientData"&gt;
      &lt;!--api nutrient data here--&gt;
    &lt;/table&gt;
  &lt;/div&gt;</code></pre>
  </div>
  </div>
  </p>
  
  <p><a href="https://i.stack.imgur.com/4tEdY.png" rel="nofollow noreferrer"><img src="https://i.stack.imgur.com/4tEdY.png" alt="Photo:"></a></p>