Странное поведение, когда div с фиксированной шириной находится внутри td

Question

Это код, о котором я говорю:

.box {
  background: rebeccapurple;
  height: 50px;
  width: 180px;
  border-radius: 6px;
  margin: 10px;
}

<table width="100%" border="1">
  <tr>
    <td>
      <div class="box"></div>
    </td>
    <td>Test</td>
  </tr>
</table>

Вот так это выглядит при работе на Chrome 75:

http://jsfiddle.net/o198cx7j/

Почему первый столбец растет так сильно? Если я уберу фиксированную ширину из div, она вернется к нормальной жизни:

Во-первых, почему это происходит? Во-вторых, как я могу заставить эту работу работать? Я хотел бы иметь фиксированную ширину div внутри td, и она должна вести себя так же, как если бы вы использовали нефиксированную ширину div.

Я знаю, что возможно переместить фиксированную ширину из div в td или использовать CSS-сетку , но я ищу альтернативное решение с использованием таблиц .

Answer 1

Причина, по которой он это делает, заключается в следующей строке: <table width="100%". Алгоритм ширины ячейки таблицы считывает фиксированную ширину 180 пикселей и пропорционально расширяет первую ячейку с ее содержимым (я не совсем уверен, почему). Если вы удалите атрибут ширины и добавите ширину 100% ко второй ячейке, вы можете оставить фиксированную ширину поля и сохранить размеры.

.second_cell{
   width: 100%;
}

.box {
  display: flex;
  background: rebeccapurple;
  height: 50px;
  width: 180px;
}

<table border="1">
  <tr height="200px">
    <td>
      <div class="box"></div>
    </td>
    <td class="second_cell">Test</td>
  </tr>
</table>

Answer 2

В качестве альтернативы ответу symlink, вы также можете указать, чтобы каждый тд имел ширину 50%.

---

Что касается того, почему это происходит, я также согласен с ответом symlink, но я бы хотелдобавьте некоторую информацию о спецификации:

Эта пропорциональная вещь заключается в том, как таблица работает по спецификации (несмотря на то, что в некоторых моментах спецификация использует слова типа «может», браузеры должны следовать спецификации, имея свои собственные различия, когда она неопределенная).

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

Дополнительную информацию можно найти в спецификации: Расчет ширины столбцов

Таким образом, безdiv с фиксированной шириной, оба столбца имеют одинаковую ширину содержимого "123" и, следовательно, они будут иметь пропорциональную ширину 50% / 50%.И имея 180px против ширины «123», он будет пропорционально распределять ширину между столбцами.Если мы изменим с 180px на 90px, пропорция изменится.Если мы изменим значение с «123» на «12345» в правом столбце, пропорция также изменится.

Answer 3

Во-первых, width="" больше не поддерживается в качестве атрибута тега таблицы.Вместо этого установите ширину с помощью CSS.

Что касается вопроса о размерах, то размер таблиц работает иначе, чем деление размеров.Решение в этом вопросе должно работать для вас:

Фиксированная ширина для первого столбца таблицы