Подделка минимальной ширины в столбце таблицы

Старый добрый <table> тег является наиболее семантическим HTML для отображения табличных данных. Но мне очень сложно контролировать то, как представлена ​​таблица, особенно ширину столбцов в динамической среде, где вы можете не знать, сколько содержимого помещается в каждую ячейку таблицы. В некоторых случаях одна колонка очень широкая, а другие сжаты. В других случаях мы получаем одинаковую ширину, но за счет столбца, который содержит больше содержимого и требует больше места.

Но я нашел обходной путь CSS-трюков, который помогает немного упростить задачу. Это то, что я хочу показать вам в этом посте.

Проблема

Сначала нам нужно понять, как макет обрабатывается браузером. У нас есть table-layout в CSS, чтобы определить, как таблица должна распределять ширину для каждого столбца таблицы. Он принимает одно из двух значений:

• auto (По умолчанию)
• fixed

Давайте начнем с таблицы, не определяя ширину ее столбцов. Другими словами, мы позволим браузеру решить, какую ширину дать каждому столбцу, применяя table-layout: auto на нем в CSS. Как вы заметите, браузер делает все возможное с алгоритмом, который он должен разделить на всю доступную ширину между каждым столбцом.

Если мы заменим автоматический макет таблицы на table-layout: fixed, тогда браузер просто разделит все доступное пространство на общее количество столбцов, а затем применит это значение в качестве ширины для каждого столбца:

Но что, если мы хотим контролировать ширину наших столбцов? У нас есть <colgroup> элемент в помощь! Он состоит из отдельных <col> элементы, которые мы можем использовать для указания точной ширины, необходимой для каждого столбца. Давайте посмотрим, как это работает с table-layout: auto:

Я встроил стили для иллюстрации.

Браузер не учитывает встроенную ширину, поскольку при добавлении она превышает объем доступного табличного пространства. В результате таблица занимает место у столбцов, так что все столбцы видны. Это совершенно нормальное поведение по умолчанию.

<colgroup> работать с table-layout: fixed. Давайте узнаем:

Это совсем не выглядит хорошо. Нам нужно, чтобы столбец с кучей контента немного изгибался, сохраняя при этом фиксированную ширину для остальных столбцов. Фиксированный table-layout value учитывает ширину, но настолько, что поглощает пространство столбца, которому требуется больше всего места… что нам не подходит.

Это можно было бы легко решить, если бы мы только могли установить min-width на колонке вместо width. Таким образом, столбец будет говорить: «Я могу дать всем вам часть своей ширины, пока мы не достигнем этого минимального значения». Тогда таблица просто переполнит свой контейнер и предоставит пользователю горизонтальную прокрутку, чтобы отобразить остальную часть таблицы. Но, к сожалению, min-width в столбцах таблицы не соблюдаются <col> элемент.

решение

Решение состоит в том, чтобы подделать min-width и нам нужно быть немного творческими, чтобы сделать это.

Мы можем добавить пустой <col> в качестве второго столбца для нашего <colgroup> в HTML и применить colspan атрибут в первом столбце, чтобы первый столбец занимал место для обоих столбцов:

<table> <colgroup> <col class="col-200" /> <col /> <col class="col-input" /> <col class="col-date" /> <col class="col-edit" /> </colgroup> <thead> <tr> <th colspan="2">Project name</th> <th>Amount</th> <th>Date</th> <th>Edit</th> </tr> </thead> <!-- etc. -->
</table>

Обратите внимание, что я добавил классы вместо встроенных стилей из предыдущего примера. Та же идея по-прежнему применима: мы применяем ширину к каждому столбцу.

Хитрость в том, что отношения между первым <col> и пустая секунда <col>. Если мы применим ширину к первому <col> (его 200px во фрагменте выше), то второй столбец будет съеден, когда фиксированный макет таблицы разделит доступное пространство для распределения по столбцам. Но ширина первого столбца (200px) соблюдается и остается на месте.

Вуаля! у нас подделка min-width установить на ячейку таблицы. Первая ячейка изгибается по мере изменения доступного пространства, и таблица переполняется для горизонтальной прокрутки, как мы и надеялись.

(добавила немного липкое позиционирование к первой колонке там.)

Универсальный доступ

Давайте не будем полностью забывать о доступности здесь. Я прогнал таблицу через NVDA в Windows и VoiceOver в macOS и обнаружил, что объявляются все пять столбцов, даже если мы используем только четыре из них. И когда первый столбец находится в фокусе, он объявляет: «Столбцы с первого по второй». Не совсем элегантно, но и не заставит кого-то заблудиться. Я думаю, мы могли бы бросить aria-hidden в неиспользуемом столбце, но также знайте, что ARIA не заменит плохой HTML.

---

Признаюсь, это кажется немного, гм, хакерским. Но это работает! Дайте мне знать, если у вас другой подход, в комментариях… или узнайте о каких-либо путаницах, которые этот «хак» может вызвать у наших пользователей.

• SEO-контент и PR-распределение. Получите усиление сегодня.
• Платоблокчейн. Интеллект метавселенной Web3. Расширение знаний. Доступ здесь.
• Источник: https://css-tricks.com/faking-min-width-on-a-table-column/