Faking min bredd på en tabell kolumn

den goda <table> taggen är den mest semantiska HTML-koden för att visa tabelldata. Men jag har väldigt svårt att kontrollera hur tabellen presenteras, särskilt kolumnbredder i en dynamisk miljö där du kanske inte vet hur mycket innehåll som kommer in i varje tabellcell. I vissa fall är en kolumn superbred medan andra är försvagade. Andra gånger får vi lika breda, men på bekostnad av en kolumn som innehåller mer innehåll och behöver mer utrymme.

Men jag hittade en CSS-trick-y-lösning som hjälper till att göra saker lite enklare. Det är vad jag vill visa er i det här inlägget.

Problemet

Först måste vi förstå hur layouten hanteras av webbläsaren. Vi har table-layout egenskap i CSS för att definiera hur en tabell ska fördela bredden för varje tabellkolumn. Det tar ett av två värden:

• auto (Standard)
• fixed

Låt oss börja med en tabell utan att definiera några bredder på dess kolumner. Med andra ord kommer vi att låta webbläsaren bestämma hur mycket bredd som ska ge varje kolumn genom att tillämpa table-layout: auto på det i CSS. Som du kommer att märka gör webbläsaren sitt bästa med den algoritm den har för att dela upp hela den tillgängliga bredden mellan varje kolumn.

Om vi ​​byter ut en automatisk tabelllayout med table-layout: fixed, så delar webbläsaren bara det fullständiga tillgängliga utrymmet med det totala antalet kolumner och tillämpar sedan det värdet som bredden för varje kolumn:

Men vad händer om vi vill kontrollera bredden på våra kolumner? Vi har <colgroup> element för att hjälpa! Den består av individuella <col> element som vi kan använda för att specificera den exakta bredd vi behöver för varje kolumn. Låt oss se hur det fungerar table-layout: auto:

Jag har infogat stilarna för illustrationens skull.

Webbläsaren respekterar inte inline-bredderna eftersom de överskrider mängden tillgängligt tabellutrymme när de läggs ihop. Som ett resultat stjäl tabellen utrymme från kolumnerna så att alla kolumner är synliga. Detta är helt okej standardbeteende.

Hur fungerar <colgroup> arbeta med table-layout: fixed. Låt oss ta reda på:

Det här ser inte alls bra ut. Vi behöver kolumnen med en massa innehåll för att flexa lite samtidigt som vi behåller en fast bredd för resten av kolumnerna. En fast table-layout värde respekterar bredden - men så mycket att det äter upp det utrymme i kolumnen som behöver mest utrymme... vilket är ett no-go för oss.

Detta skulle lätt kunna lösas om vi bara kunde ställa in en min-width på kolumnen istället för en width. På så sätt skulle kolumnen säga: "Jag kan ge er alla en del av min bredd tills vi når detta lägsta värde." Sedan skulle tabellen helt enkelt svämma över sin behållare och ge användaren en horisontell rullning för att visa resten av tabellen. Men tyvärr, min-width på tabell kolumner inte respekteras av <col> elementet.

Lösningen

Lösningen är att fejka en min-width och vi måste vara lite kreativa för att göra det.

Vi kan lägga till en tom <col> som andra kolumnen för vår <colgroup> i HTML-koden och tillämpa en colspan attribut på den första kolumnen så att den första kolumnen tar upp utrymmet för båda kolumnerna:

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

Observera att jag har lagt till klasser i stället för inline-stilarna från föregående exempel. Samma idé gäller fortfarande: vi tillämpar bredder på varje kolumn.

Tricket är att förhållandet mellan den första <col> och den tomma sekunden <col>. Om vi ​​tillämpar en bredd på den första <col> (dess 200px i utdraget ovan), så kommer den andra kolumnen att ätas upp när den fasta tabelllayouten delar upp det tillgängliga utrymmet att distribuera till kolumnerna. Men bredden på den första kolumnen (200px) respekteras och förblir på plats.

Voilà! Vi har en faux min-width inställd på en tabellcell. Den första cellen böjs när det tillgängliga utrymmet ändras och tabellen svämmar över för horisontell rullning precis som vi hoppades att den skulle göra.

(Jag lade till lite klibbig positionering till den första kolumnen där.)

Tillgänglighet

Låt oss inte helt glömma tillgängligheten här. Jag körde tabellen genom NVDA på Windows och VoiceOver på macOS och upptäckte att alla fem kolumner annonseras, även om vi bara använder fyra av dem. Och när den första kolumnen är i fokus, meddelar den, "Kolumn ett till två". Inte perfekt elegant men kommer inte heller att få någon att gå vilse. Jag föreställer mig att vi skulle kunna kasta en aria-hidden attributet på den oanvända kolumnen, men vet också att ARIA inte är en ersättning för dålig HTML.

---

Jag ska erkänna, det här känns lite, um, hackigt. Men det funkar! Låt mig veta om du har ett annat tillvägagångssätt i kommentarerna ... eller känner till någon förvirring som detta "hack" kan ge våra användare.

• SEO-drivet innehåll och PR-distribution. Bli förstärkt idag.
• Platoblockchain. Web3 Metaverse Intelligence. Kunskap förstärkt. Tillgång här.
• Källa: https://css-tricks.com/faking-min-width-on-a-table-column/