Почему браузер показывает td больше, чем указанное свойство width?

td width - 162px, хотя style = "width: 25px" для td и th

Я поместил это в свой файл css

table, td, th {
    border: 1px solid black;
}
table {
    border-collapse:collapse;
}

table.narrow th, td {
    width:50px;
}

Это не работает. Последний из них должен взять таблицу с class= "узким" и сделать все ее дочерние элементы th и td 50px в ширину. И хром показывает согласованные правила CSS:

.narrow th, td { width: 50px; }

Итак, хром читает его и игнорирует? Или CSS просто идиотский? Или я? Почему CSS не может делать то, что вы говорите, как обычный язык программирования?

SO, я попробовал положить style = "width: 25px" прямо в 1-й столбец td AND th тегов и по-прежнему не работает. Chrome показывает:

element.style { width:25px; }

но он не скажет мне, почему, черт возьми, он показывает его на 162px.

У кого-нибудь есть подсказки? Спасибо.

Изменить: Колинк дал мне ключ, который мне нужен. Текстовые поля формы внутри тегов вызывают большую минимальную ширину. Я добавил этот стиль, чтобы сжать таблицу:

.narrow input{
  width:80px;
}

Он уменьшил ширину всех входов внутри class= "узкой" таблицы и, следовательно, уменьшил ширину таблицы.

Ответы

Ответ 1

Установите table-layout: fixed; в стилях таблицы. В противном случае макет таблицы свободен и width обрабатывается больше как min-width.

Ответ 2

Ваше определение для всех TD

table.narrow th, td {
    width:50px;
}

Вы должны повторить затронутый элемент в перечислении

table.narrow th, table.narrow td {
    width:50px;
}