title: How to "left-align" a table in the "center" of the page?
body: <p>This may be a weird one:</p>
  
  <p><strong>I have a page where I don't control the HTML, but I can inject some additional CSS</strong>.</p>
  
  <p>I have some tables which I need to align on the page. The problem is that all the other elements are aligned center on the page, but they all have fixed width. For aesthetic reasons I don't want all the tables to be of the same width, I want them to be of variable width depending on the contents.</p>
  
  <p>Notice in the below code how the main container is full width on the page and the other content does not have any other wrapper elements around them. Because of this, all individual items are centered on the page using css. And also because <strong>the main container has other full width children (that I have not shown here), I cannot make the container be of reduced width and center it</strong>.</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>*, *:before, *:after {
      box-sizing: border-box;
  }
  
  .content {
    width: 100%;
    background-color: #ddd;
  }
  
  .content p,
  .content span,
  .content table {
      display: block;
      max-width: 300px;
      margin-left: auto;
      margin-right: auto;
      background: #999;
  }</code></pre>
  <pre class="snippet-code-html lang-html prettyprint-override"><code>&lt;div class=content&gt;
    &lt;span&gt;Some content header &lt;/span&gt;
    
    &lt;p&gt;Some content which can be long.. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Suspendisse ac blandit nisi. Curabitur fermentum dui tortor, sed rutrum velit facilisis non. Aliquam erat volutpat. Phasellus egestas erat sapien, ac scelerisque erat rhoncus id. Nullam aliquam libero et aliquam bibendum. Curabitur porttitor lorem in libero molestie, vitae ornare lacus fermentum. Curabitur condimentum tellus fermentum, feugiat nunc dictum, commodo est.&lt;/p&gt;
    
    &lt;table class=table1&gt;
      &lt;tr&gt;
        &lt;td&gt;Test Table 1&lt;/td&gt;
      &lt;/tr&gt;
    &lt;/table&gt;
    
    &lt;br/&gt;
    
    &lt;table class=table2&gt;
      &lt;tr&gt;
        &lt;td&gt;Test table 2 which need to have more width than the first one&lt;/td&gt;
      &lt;/tr&gt;
    &lt;/table&gt;
  &lt;/div&gt;</code></pre>
  </div>
  </div>
  </p>
  
  <p>What I finally want looks something like this image:</p>
  
  <p><a href="https://i.stack.imgur.com/0wHhv.png" rel="nofollow noreferrer"><img src="https://i.stack.imgur.com/0wHhv.png" alt="expected alignment"></a></p>
  
  <p>Notice that:</p>
  
  <ol>
  <li>The tables are left aligned with the rest of the items in the page.</li>
  <li>The tables are of different width.</li>
  </ol>
  
  <p>Obviously I don't want to hardcode the widths or the left margin for the tables.</p>
  
  <p>Any idea if I can achieve this using just CSS?</p>