Підробка мінімальної ширини стовпця таблиці

старий добрий <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 значення поважає ширину — але настільки, що воно з’їдає простір стовпця, який потребує найбільше місця… що для нас заборонено.

Це можна було б легко вирішити, якби ми могли встановити a min-width на колонці замість a width. Таким чином у стовпці буде написано: «Я можу дати вам усім свою ширину, доки ми не досягнемо цього мінімального значення». Тоді таблиця просто переповнить свій контейнер і дасть користувачеві горизонтальну прокрутку, щоб відобразити решту таблиці. Але на жаль, min-width на стовпці таблиці не дотримуються <col> елемент.

Рішення

Рішення - підробити a min-width і нам потрібно бути трохи креативними, щоб це зробити.

Ми можемо додати пусте <col> як другу колонку для нашого <colgroup> у HTML і застосуйте a 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.

---

Зізнаюся, це виглядає трохи, гм, хакерським. Але це працює! Дайте мені знати, якщо у вас є інший підхід у коментарях… або ви знаєте про будь-яку плутанину, яку цей «хак» може принести нашим користувачам.

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