title: Inline styles for tables in ReactJS/JSX
body: <p>Hi I'm having trouble adding inline styling to table components in React. Basically what I'm trying to do is so that the table header/cells are divided equally spacing so I'm adding <code>width: '50%'</code> styling to make this work. I added in the console and it works, but when I return to add it in my code, it doesn't.</p>
  
  <p>I tried adding it to anything just to see if it work and it doesn't. Is there something I'm missing?</p>
  
  <p><strong>What it looks like:</strong></p>
  
  <p><a href="https://i.stack.imgur.com/FPcZi.png" rel="nofollow noreferrer"><img src="https://i.stack.imgur.com/FPcZi.png" alt="What it looks like"></a></p>
  
  <p><strong>What I want it to look like (after adding width styling to console):</strong>
  <a href="https://i.stack.imgur.com/pLzy8.png" rel="nofollow noreferrer"><img src="https://i.stack.imgur.com/pLzy8.png" alt="Width 50%"></a></p>
  
  <p><strong>JSX</strong>:</p>
  
  <pre><code>                    &lt;table className="table table-striped"&gt;
                          &lt;thead&gt;
                              &lt;tr styles={{width: '50%'}}&gt;
                                  &lt;th styles={{width: '50%'}}&gt;Hello&lt;/th&gt;
                                  &lt;th styles={{width: '50%'}}&gt;World&lt;/th&gt;                                
                              &lt;/tr&gt;
                          &lt;/thead&gt;
                          &lt;tbody&gt;
                              {(data.length == 0)&amp;&amp;           
                                  &lt;tr&gt;
                                      &lt;td&gt;I'm&lt;/td&gt;
                                      &lt;td&gt;Sam&lt;/td&gt;
                                  &lt;/tr&gt;
                              }
                          &lt;/tbody&gt;
                      &lt;/table&gt;
  </code></pre>