Fałszowanie minimalnej szerokości kolumny tabeli

stary dobry <table> tag to najbardziej semantyczny kod HTML do wyświetlania danych tabelarycznych. Ale bardzo trudno jest mi kontrolować sposób prezentacji tabeli, zwłaszcza szerokości kolumn w dynamicznym środowisku, w którym możesz nie wiedzieć, ile treści trafia do każdej komórki tabeli. W niektórych przypadkach jedna kolumna jest bardzo szeroka, podczas gdy inne są zgniecione. Innym razem uzyskujemy równe szerokości, ale kosztem kolumny, która zawiera więcej treści i potrzebuje więcej miejsca.

Ale znalazłem obejście CSS-y, które pomaga trochę ułatwić. Właśnie to chcę Wam pokazać w tym poście.

Problem

Najpierw musimy zrozumieć, w jaki sposób przeglądarka obsługuje układ. Mamy table-layout właściwość w CSS, aby określić, w jaki sposób tabela powinna rozłożyć szerokość dla każdej kolumny tabeli. Przyjmuje jedną z dwóch wartości:

• auto (Domyślne)
• fixed

Zacznijmy od tabeli bez definiowania szerokości jej kolumn. Innymi słowy, pozwolimy przeglądarce zdecydować, jaką szerokość nadać każdej kolumnie, stosując table-layout: auto na nim w CSS. Jak zauważysz, przeglądarka robi wszystko, co w jej mocy, z algorytmem, który musi podzielić pełną dostępną szerokość między każdą kolumną.

Jeśli zamienimy automatyczny układ tabeli z table-layout: fixed, przeglądarka po prostu podzieli całą dostępną przestrzeń przez całkowitą liczbę kolumn, a następnie zastosuje tę wartość jako szerokość każdej kolumny:

Ale co, jeśli chcemy kontrolować szerokości naszych kolumn? Mamy <colgroup> elementem pomocy! Składa się z pojedynczych <col> elementy, których możemy użyć do określenia dokładnej szerokości potrzebnej dla każdej kolumny. Zobaczmy, jak to działa z table-layout: auto:

Dla ilustracji wstawiłem style.

Przeglądarka nie przestrzega szerokości w wierszu, ponieważ po zsumowaniu przekraczają one ilość dostępnego miejsca w tabelach. W rezultacie tabela kradnie miejsce z kolumn, dzięki czemu widoczne są wszystkie kolumny. Jest to całkowicie w porządku zachowanie domyślne.

Jak działa <colgroup> pracować z table-layout: fixed. Dowiedzmy Się:

To wcale nie wygląda dobrze. Potrzebujemy, aby kolumna z dużą ilością treści lekko się wyginała, zachowując stałą szerokość dla pozostałych kolumn. Stały table-layout value szanuje szerokość — ale tak bardzo, że zajmuje miejsce w kolumnie, która potrzebuje najwięcej miejsca… co jest dla nas nie do przyjęcia.

Można to łatwo rozwiązać, gdybyśmy tylko mogli ustawić a min-width na kolumnie zamiast a width. W ten sposób kolumna powie: „Mogę dać wam wszystkim trochę mojej szerokości, dopóki nie osiągniemy tej minimalnej wartości”. Następnie tabela po prostu przepełniłaby swój pojemnik i umożliwiła użytkownikowi przewinięcie w poziomie, aby wyświetlić resztę tabeli. Lecz niestety, min-width w kolumnach tabeli nie są przestrzegane przez <col> elementem.

rozwiązanie

Rozwiązaniem jest sfałszowanie a min-width i musimy być trochę kreatywni, aby to zrobić.

Możemy dodać puste <col> jako druga kolumna dla naszego <colgroup> w HTML i zastosuj a colspan atrybut w pierwszej kolumnie, tak aby pierwsza kolumna zajmowała miejsce dla obu kolumn:

<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>

Zauważ, że dodałem klasy zamiast stylów wbudowanych z poprzedniego przykładu. Nadal obowiązuje ten sam pomysł: stosujemy szerokości do każdej kolumny.

Sztuczka polega na tym, że związek między pierwszym <col> i pusta sekunda <col>. Jeśli zastosujemy szerokość do pierwszego <col> (jego 200px we fragmencie powyżej), druga kolumna zostanie wykorzystana, gdy ustalony układ tabeli podzieli dostępne miejsce do rozmieszczenia w kolumnach. Ale szerokość pierwszej kolumny (200px) jest przestrzegane i pozostaje na swoim miejscu.

Nie! Mamy podróbkę min-width ustawić na komórce stołu. Pierwsza komórka wygina się, gdy zmienia się dostępna przestrzeń, a tabela przepełnia się w celu przewijania w poziomie, tak jak się spodziewaliśmy.

(trochę dodałem lepkie pozycjonowanie do pierwszej kolumny).

dostępność

Nie zapominajmy całkowicie o dostępności tutaj. Przejrzałem tabelę przez NVDA w systemie Windows i VoiceOver w systemie macOS i stwierdziłem, że wszystkie pięć kolumn jest ogłaszanych, nawet jeśli używamy tylko czterech z nich. A kiedy pierwsza kolumna jest aktywna, ogłasza: „Kolumna od pierwszej do drugiej”. Nie do końca eleganckie, ale też nie sprawią, że ktoś się zgubi. Wyobrażam sobie, że moglibyśmy rzucić aria-hidden atrybut w nieużywanej kolumnie, ale wiedz również, że ARIA nie zastępuje słabego HTML.

---

Przyznam, że to trochę, um, hacky. Ale to działa! Daj mi znać, jeśli masz inne podejście w komentarzach… lub wiesz o wszelkich niejasnościach, jakie ten „hack” może przynieść naszym użytkownikom.

• Dystrybucja treści i PR oparta na SEO. Uzyskaj wzmocnienie już dziś.
• Platoblockchain. Web3 Inteligencja Metaverse. Wzmocniona wiedza. Dostęp tutaj.
• Źródło: https://css-tricks.com/faking-min-width-on-a-table-column/