title: Centering a table with text-align center
body: <p>I want to center a table, but although it's technically centered, the different length of the td's content makes the table have an empty space on the right. </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-css lang-css prettyprint-override"><code>.wrap {
    background: pink;
    padding: 0 50px;
  }
  
  table {
    margin: 0 auto;
    text-align: center;
    width: 100%;
    tr {
      td {
        padding: 10px;
        text-align: left;
      }
    }
  }</code></pre>
  <pre class="snippet-code-html lang-html prettyprint-override"><code>&lt;div class="wrap"&gt;
    &lt;table&gt;
      &lt;tbody&gt;
        &lt;tr&gt;
          &lt;td&gt;something here&lt;/td&gt;
          &lt;td&gt;row 1 col 2 my &lt;/td&gt;
        &lt;/tr&gt;
        &lt;tr&gt;
          &lt;td&gt;row 2 col 1 hello world&lt;/td&gt;
          &lt;td&gt;react.js&lt;/td&gt;
        &lt;/tr&gt;
      &lt;/tbody&gt;
    &lt;/table&gt;
  &lt;/div&gt;</code></pre>
  </div>
  </div>
  </p>
  
  <p>I can make the <code>table</code> and the <code>td</code> to be an aligned center but the different length of the td's content makes it look uneven. </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-css lang-css prettyprint-override"><code>.wrap {
    background: pink;
    padding: 0 50px;
  }
  
  table {
    margin: 0 auto;
    text-align: center;
    width: 100%;
    tr {
      td {
        padding: 10px;
      }
    }
  }</code></pre>
  <pre class="snippet-code-html lang-html prettyprint-override"><code>&lt;div class="wrap"&gt;
    &lt;table&gt;
      &lt;tbody&gt;
        &lt;tr&gt;
          &lt;td&gt;something here&lt;/td&gt;
          &lt;td&gt;row 1 col 2 my &lt;/td&gt;
        &lt;/tr&gt;
        &lt;tr&gt;
          &lt;td&gt;row 2 col 1 hello world&lt;/td&gt;
          &lt;td&gt;react.js&lt;/td&gt;
        &lt;/tr&gt;
      &lt;/tbody&gt;
    &lt;/table&gt;
  &lt;/div&gt;</code></pre>
  </div>
  </div>
  </p>
  
  <p>What I want is td's content should be align left and look center within the wrapper, like the labels on this image (i.e. Cam 1, Cam 2 etc):</p>
  
  <p><a href="https://i.stack.imgur.com/KyTVE.png" rel="nofollow noreferrer"><img src="https://i.stack.imgur.com/KyTVE.png" alt="enter image description here"></a></p>