Блог

У меня есть базовая таблица с прокручиваемым телом. Для этого мне пришлось установить ad и tbody display: block, и я также установил ширину для th и td.

По какой-то причине первый столбец th не совпадает с первым столбцом tds. Кто-нибудь может сказать мне, что является причиной этого?

CSS

  thead,
 tbody {
  display: block;
 }

 thead {
  text-align: left;
 }

 tbody {
  background: yellow;
  overflow-y: auto;
  height: 6em;
 }

 thead th,
 tbody td {
  width: 4em;
  padding: 2px;
 }

 thead tr th:first-child,
 tbody tr td:first-child {
  width: 8em;
  background: salmon;
  font-weight: normal;
 }
  

Вот скрипка

Свойство width для DIV amp; TABLE работает по-другому.

Используйте max-width amp; min-width для достижения желаемых результатов:

 thead tr th:first-child,
tbody tr td:first-child {
  width: 8em;
  min-width: 8em;
  max-width: 8em;
  word-break: break-all;
}
  

Редактировать:

(Редактирование ответа проясняет работу с width в HTML, пожалуйста, укажите, если я что-то не так понял или что-то пропустил!)

В divs свойство width используется для определения размера элемента, и содержимое помещается соответствующим образом, независимо от родительской и дочерней ширины.

Но в случае таблицы размер элемента вычисляется в соответствии с содержимым, и свойство width получает более низкий приоритет. Учитывается даже размер родственного файла. Таким образом, нам приходится использовать дополнительные свойства, такие как min-width и max-width , чтобы задать нужный размер!