Исправлена ​​Thead;Scrollable Tbody ~ Righter Columns Меньше выравнивания

Question

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

table {
  overflow: hidden;
  width: 100%;
  height: 810px;
  table-layout: fixed;
  display: flex;
  flex-direction: column;
  align-items: center;
  overflow: hidden;
}

thead,
tbody {
  width: 100%;
}

tbody {
  flex: 1;
  overflow-y: scroll;
  width: 100%;
}

th {
  cursor: pointer;
}

th {
}

td {
  display: flex;
  justify-content: center;
}

td,
th {
  padding: 0;
}

tr {
  width: 100%;
  display: flex;
}

tr th {
  flex: 1;
}

tr td {
  flex: 1;
}

Вот небольшой пример Codepen: https://codepen.io/anon/pen/xMmqxK

Перекос Codepen менее заметен, чем перекос на моем веб-сайте, поэтому его немного сложно заметить,Любая помощь приветствуется.Если бы я опубликовал скриншот, вы бы смогли увидеть проблему больше, однако я не смогу из-за корпоративного окружения.Еще раз спасибо.

Answer 1

Основная проблема здесь в том, что <th> s text-align:center, а <td> s text-align:left.Вот почему перекос увеличивается, когда в каждом столбце остается больше места.

Самое простое решение - удалить padding-left: 10px из <tbody> (входит только в CopePen) и установить <td> s до text-align: center.

Если вам нужно выровнять <td> s по левому краю, вы можете сделать обратное и установить для <th> s значение text-align:left.