Как «выровнять по левому краю» таблицу в «центре» страницы?

Question

Это может быть странно:

У меня есть страница, на которой я не контролирую HTML, но я могу добавить некоторые дополнительные CSS .

Iесть несколько таблиц, которые мне нужно выровнять на странице.Проблема в том, что все остальные элементы выровнены по центру страницы, но все они имеют фиксированную ширину.По эстетическим соображениям я не хочу, чтобы все таблицы были одинаковой ширины, я хочу, чтобы они имели переменную ширину в зависимости от содержимого.

Обратите внимание, что в приведенном ниже коде основной контейнер имеет полную ширину настраница и другое содержимое не имеют никаких других элементов обертки вокруг них.Из-за этого все отдельные элементы центрируются на странице с помощью 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% ширины экрана, а также выравнивание по левому краю всего текста в нем.

Обновление

Если вы не можете центрировать элемент-обертку, используйте вместо этого flexbox на элементе-обертке, чтобыцентрируйте все дочерние элементы.

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

Приведенный выше CSS делает так, что любой элемент, который является прямым потомком обертки, будет центрирован, поэтому все элементы будут одинаково центрированы, включая вашу таблицу.Если вы хотите, чтобы они находились на одинаковом расстоянии друг от друга, измените justify-content: center; на justify-content: space-between;.