Minimale breedte vervalsen op een tabelkolom

De goede oude <table> tag is de meest semantische HTML voor het weergeven van gegevens in tabelvorm. Maar ik vind het erg moeilijk om te bepalen hoe de tabel wordt gepresenteerd, met name kolombreedtes in een dynamische omgeving waar je misschien niet weet hoeveel inhoud er in elke tabelcel gaat. In sommige gevallen is de ene kolom superbreed, terwijl andere opgerold zijn. Andere keren krijgen we gelijke breedtes, maar dit gaat ten koste van een kolom die meer inhoud bevat en meer ruimte nodig heeft.

Maar ik heb een CSS-trick-y-oplossing gevonden die de zaken een beetje eenvoudiger maakt. Dat is wat ik je wil laten zien in deze post.

Het probleem

Eerst moeten we begrijpen hoe de lay-out door de browser wordt afgehandeld. We hebben de table-layout eigenschap in CSS om te definiëren hoe een tabel de breedte voor elke tabelkolom moet verdelen. Er is een van de volgende twee waarden nodig:

• auto (Standaard)
• fixed

Laten we beginnen met een tabel zonder breedtes op de kolommen te definiëren. Met andere woorden, we laten de browser beslissen hoeveel breedte elke kolom moet krijgen door toe te passen table-layout: auto erop in CSS. Zoals u zult merken, doet de browser zijn best met het algoritme dat het heeft om de volledige beschikbare breedte tussen elke kolom te verdelen.

Als we een automatische tafelindeling omwisselen met table-layout: fixed, dan deelt de browser alleen de volledig beschikbare ruimte door het totale aantal kolommen en past die waarde vervolgens toe als de breedte voor elke kolom:

Maar wat als we de breedte van onze kolommen willen regelen? We hebben de <colgroup> onderdeel om te helpen! Het bestaat uit individuele <col> elementen die we kunnen gebruiken om de exacte breedte te specificeren die we nodig hebben voor elke kolom. Laten we eens kijken hoe dat werkt table-layout: auto:

Ter illustratie heb ik de stijlen ingelijnd.

De browser respecteert de inline-breedtes niet, omdat ze bij optelling de beschikbare tabelruimte overschrijden. Als gevolg hiervan steelt de tabel ruimte van de kolommen, zodat alle kolommen zichtbaar zijn. Dit is prima standaardgedrag.

Hoe werkt <colgroup> werk met table-layout: fixed. Laten wij het uitzoeken:

Dit ziet er helemaal niet goed uit. We hebben de kolom met een hoop inhoud nodig om een ​​beetje te buigen terwijl de rest van de kolommen een vaste breedte behoudt. Een vaste table-layout waarde respecteert de breedte - maar zozeer zelfs dat het de ruimte opslokt van de kolom die de meeste ruimte nodig heeft ... wat voor ons niet mag.

Dit zou gemakkelijk opgelost kunnen worden als we maar een min-width op de kolom in plaats van a width. Op die manier zou de kolom zeggen: "Ik kan jullie allemaal wat van mijn breedte geven totdat we deze minimumwaarde hebben bereikt." Dan zou de tabel gewoon overlopen en de gebruiker een horizontale scroll geven om de rest van de tabel weer te geven. Maar helaas, min-width op tabelkolommen worden niet gerespecteerd door de <col> element.

De oplossing

De oplossing is om een min-width en we moeten een beetje creatief zijn om het te doen.

We kunnen een lege toevoegen <col> als de tweede kolom voor onze <colgroup> in de HTML en pas a colspan attribuut op de eerste kolom zodat de eerste kolom de ruimte voor beide kolommen inneemt:

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

Merk op dat ik klassen heb toegevoegd in plaats van de inline-stijlen uit het vorige voorbeeld. Hetzelfde idee is nog steeds van toepassing: we passen breedten toe op elke kolom.

De truc is die relatie tussen de eerste <col> en de lege seconde <col>. Als we een breedte toepassen op de eerste <col> (haar 200px in het bovenstaande fragment), dan wordt de tweede kolom opgegeten wanneer de vaste tabellay-out de beschikbare ruimte verdeelt over de kolommen. Maar de breedte van de eerste kolom (200px) wordt gerespecteerd en blijft van kracht.

Voila! We hebben een namaak min-width ingesteld op een tafelcel. De eerste cel buigt als de beschikbare ruimte verandert en de tabel loopt over voor horizontaal scrollen, precies zoals we hadden gehoopt.

(Ik voegde een beetje toe plakkerige positionering naar de eerste kolom daar.)

Toegankelijkheid

Laten we de toegankelijkheid hier niet helemaal vergeten. Ik heb de tabel door NVDA op Windows en VoiceOver op macOS geleid en ontdekte dat alle vijf de kolommen zijn aangekondigd, ook al gebruiken we er maar vier. En wanneer de eerste kolom in focus is, kondigt deze aan: "Kolom één tot en met twee". Niet perfect elegant, maar ook niet om iemand te laten verdwalen. Ik stel me voor dat we een kunnen gooien aria-hidden attribuut op de ongebruikte kolom, maar weet ook dat ARIA geen vervanging is voor slechte HTML.

---

Ik geef toe, dit voelt een beetje, eh, hacky. Maar het werkt wel! Laat het me weten als je een andere aanpak hebt in de reacties... of als je op de hoogte bent van eventuele verwarring die deze 'hack' voor onze gebruikers kan veroorzaken.

• Door SEO aangedreven content en PR-distributie. Word vandaag nog versterkt.
• Platoblockchain. Web3 Metaverse Intelligentie. Kennis versterkt. Toegang hier.
• Bron: https://css-tricks.com/faking-min-width-on-a-table-column/