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

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

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

  1. Используйте свойство margin со значением auto для элемента table и установите ему фиксированную ширину.
table {
  width: 80%;
  margin: 0 auto;
}
  1. Используйте свойства display и margin со значением auto для элемента table.
.table-wrapper {
  display: table;
  margin: 0 auto;
}
  1. Используйте свойство text-align со значением center для родительского элемента таблицы.
.table-wrapper {
  text-align: center;
}

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

  1. Используйте свойство display со значением table-cellvertical-align со значением middle и text-align со значением center для элементов td и th.
td, th {
  display: table-cell;
  vertical-align: middle;
  text-align: center;
}
  1. Используйте свойство display со значением flexalign-items со значением center и justify-content со значением center для родительского элемента таблицы.
.table-wrapper {
  display: flex;
  align-items: center;
  justify-content: center;
}
  1. Используйте свойство position со значением absolutetopbottomleft и right со значением 0 и margin со значением auto для элемента table.
table {
  position: absolute;
  top: 0; bottom: 0; left: 0; right: 0;
  margin: auto;
}

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

реклама

Качественный хостинг сайтов

реклама

Получите консультацию нашего маркетолога

Изучит ваш проект, подберет подходящие услуги и тарифы

Получите бесплатный аудит

Наш специалист сделает базовый аудит вашего проекта и предложит персональные предложения.

Закажите услугу Как выровнять таблицу css

Наш специалист свяжется с вами в ближайшее время и уточнит детали