title: Aligning text in th tag in JSX
body: <p>I am trying to center the text in my th tag, and it is working fine in my example here: <a href="http://codepen.io/p-adams/pen/qNxZBV" rel="nofollow">http://codepen.io/p-adams/pen/qNxZBV</a> but if I view my code in the browser (Firefox), the text in my <code>&lt;th&gt;</code> tags is not centered. I am not sure if this has something to do with the browser. I have some basic styling:</p>
  
  <pre><code>th {
     border: 1px solid purple;
     width: 125px;
     text-align: center;
     padding: 10px;
  }
  </code></pre>
  
  <p>And then in my ReactJS component where I render the <code>table</code>:</p>
  
  <pre><code>&lt;table&gt;
      &lt;thead&gt;
          &lt;tr&gt;
              &lt;th&gt;Course #&lt;/th&gt;
              &lt;th&gt;Course name&lt;/th&gt;
              &lt;th&gt;Credit hours&lt;/th&gt;
              &lt;th&gt;Time&lt;/th&gt;
              &lt;th&gt;Days&lt;/th&gt;
              &lt;th&gt;Seats available&lt;/th&gt;
          &lt;/tr&gt;
      &lt;/thead&gt;
      &lt;tbody&gt;
          {details}
      &lt;/tbody&gt;
  &lt;/table&gt;
  </code></pre>