如何在页面的“中心”使表格“左对齐”？

Question

这可能很奇怪：

我有一个页面，我无法控制HTML，但是可以注入一些其他CSS 。

我有一些表需要在页面上对齐。问题是所有其他元素在页面上居中对齐，但是它们的宽度都固定。出于美学原因，我不希望所有桌子的宽度都一样，我希望它们的宽度取决于内容。

在下面的代码中，请注意主容器在页面上是如何全宽的，而其他内容在它们周围没有其他包装元素。因此，所有单个项目都使用CSS在页面上居中。另外，由于主容器具有其他全角子级（我在这里未显示），所以我不能使容器的宽度减小并居中。

*, *: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;
}

<div class=content>
  <span>Some content header </span>
  
  <p>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.</p>
  
  <table class=table1>
    <tr>
      <td>Test Table 1</td>
    </tr>
  </table>
  
  <br/>
  
  <table class=table2>
    <tr>
      <td>Test table 2 which need to have more width than the first one</td>
    </tr>
  </table>
</div>

我最终想要的看起来像这张图片：

注意：

1. 表格与页面中的其余项目保持对齐。
2. 桌子的宽度不同。

很显然，我不想对表格的宽度或左边距进行硬编码。

您知道我是否可以仅使用CSS来实现这一目标吗？

Answer 1

将以下CSS添加到表的外部包装器中：

.wrapper {
    display: block;
    margin: auto;
    max-width: 80%;
}

将此CSS添加到表中

table th, table td {
    text-align: left;
}

上面的CSS既可以使表格居中到屏幕宽度的80％，也可以使表格中的所有文本左对齐。

更新

如果无法将wrapper元素居中，请在wrapper元素上使用flexbox来使所有子元素居中。

.wrapper {
    display: flex;
    flex-direction: row;
    justify-content: center;
    align-items: center;
}

上面的CSS使所有作为包装器直接子元素的元素都居中，因此所有元素都将居中居中，包括表格。如果希望它们彼此等距隔开，请将justify-content: center;更改为justify-content: space-between;。