Flex Table CSS Проблемы усечения

Question

Я пытаюсь создать гибкий макет таблицы, в котором есть один столбец, который вообще не сгибается. В нем достаточно места для размещения кнопки для выпадающего списка действий. Остальные строки должны полностью занимать следующее пространство и обрезаться при необходимости.

https://codesandbox.io/s/awesome-galois-i70rr?file= / src / App. js

Я работаю в Реагируйте на приложение, но я работаю с нативными элементами таблицы. Хотя мое усечение, безусловно, работает, на определенной ширине, похоже, есть точка останова, в которой он просто прекращает усечение, и вместо этого таблица переполняет тело. Теоретически это никогда не должно происходить, если ширина браузера не превышает 48 пикселей, выделенных для кнопки, чего, конечно, никогда не бывает. Другие столбцы должны продолжать усекаться, а не останавливаться на некоторой случайной точке останова. Кроме того, остальные столбцы не изгибаются пропорционально их содержанию. Любые идеи о том, как исправить эти две проблемы?

Answer 1

Это то, что происходит, когда вы комбинируете разметку таблицы с разметкой блок / сгиб. Если вы собираетесь зафиксировать display: flex в строках таблицы, вам необходимо расширить метод макета, не связанный с таблицей, до table и tbody.

Изменение table и tbody на display: block исправит проблему в вашем CodeSandbox.

Я бы также изменил thead, чтобы также заблокировать отображение, что является наилучшей практикой и для согласованности, даже если вы не увидите никаких проблем с ним в Ваш текущий пример, так как самая длинная ячейка каждого столбца находится в tbody вместо thead. Если бы у одного из столбцов был заголовок столбца, который был длиннее, чем любая из ячеек в теле под ним, вы столкнулись бы с аналогичной проблемой, если не установить thead для блокировки отображения.