Как выровнять таблицу css

Выравнивание таблицы CSS зависит от того, как именно нужно выровнять ее содержимое. Как правило, наиболее популярным способом выравнивания таблицы является горизонтальное и вертикальное центрирование. Вот несколько способов достижения этого:

Горизонтальное выравнивание:

1. Используйте свойство margin со значением auto для элемента table и установите ему фиксированную ширину.

table {
  width: 80%;
  margin: 0 auto;
}

2. Используйте свойства display и margin со значением auto для элемента table.

.table-wrapper {
  display: table;
  margin: 0 auto;
}

3. Используйте свойство text-align со значением center для родительского элемента таблицы.

.table-wrapper {
  text-align: center;
}

Вертикальное выравнивание:

1. Используйте свойство display со значением table-cell, vertical-align со значением middle и text-align со значением center для элементов td и th.

td, th {
  display: table-cell;
  vertical-align: middle;
  text-align: center;
}

2. Используйте свойство display со значением flex, align-items со значением center и justify-content со значением center для родительского элемента таблицы.

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

3. Используйте свойство position со значением absolute, top, bottom, left и right со значением 0 и margin со значением auto для элемента table.

table {
  position: absolute;
  top: 0; bottom: 0; left: 0; right: 0;
  margin: auto;
}

Необходимо заметить, что при вертикальном выравнивании таблицы необходимо задать ей высоту. В противном случае, выравнивание не будет работать.