Falsche Mindestbreite in einer Tabellenspalte

Der gute alte <table> -Tag ist das semantischste HTML zum Anzeigen tabellarischer Daten. Aber ich finde es sehr schwierig, die Darstellung der Tabelle zu steuern, insbesondere die Spaltenbreite in einer dynamischen Umgebung, in der Sie möglicherweise nicht wissen, wie viel Inhalt in jede Tabellenzelle gelangt. In einigen Fällen ist eine Spalte superbreit, während andere zusammengeknüllt sind. In anderen Fällen erhalten wir gleiche Breiten, aber auf Kosten einer Spalte, die mehr Inhalt enthält und mehr Platz benötigt.

Aber ich habe eine CSS-tricksartige Problemumgehung gefunden, die die Dinge ein wenig einfacher macht. Das möchte ich dir in diesem Beitrag zeigen.

Das Problem

Zuerst müssen wir verstehen, wie das Layout vom Browser gehandhabt wird. Wir haben das table-layout -Eigenschaft in CSS, um zu definieren, wie eine Tabelle die Breite für jede Tabellenspalte verteilen soll. Es nimmt einen von zwei Werten an:

• auto (Default)
• fixed

Beginnen wir mit einer Tabelle, ohne Breiten für ihre Spalten zu definieren. Mit anderen Worten, wir lassen den Browser entscheiden, wie viel Breite jeder Spalte durch Anwenden zugewiesen wird table-layout: auto darauf in CSS. Wie Sie feststellen werden, tut der Browser sein Bestes mit dem Algorithmus, den er hat, um die volle verfügbare Breite zwischen den einzelnen Spalten aufzuteilen.

Wenn wir ein automatisches Tabellenlayout austauschen mit table-layout: fixed, dann teilt der Browser lediglich den gesamten verfügbaren Platz durch die Gesamtzahl der Spalten und wendet diesen Wert dann als Breite für jede Spalte an:

Aber was ist, wenn wir die Breite unserer Spalten steuern wollen? Wir haben das <colgroup> Element zu helfen! Es besteht aus einzelnen <col> Elemente, die wir verwenden können, um die genaue Breite anzugeben, die wir für jede Spalte benötigen. Mal sehen, wie das mit funktioniert table-layout: auto:

Ich habe die Stile zur Veranschaulichung inliniert.

Der Browser berücksichtigt die Inline-Breiten nicht, da sie den verfügbaren Tabellenplatz überschreiten, wenn sie addiert werden. Als Ergebnis stiehlt die Tabelle Platz aus den Spalten, sodass alle Spalten sichtbar sind. Dies ist ein völlig in Ordnung Standardverhalten.

Wie funktioniert <colgroup> arbeiten mit table-layout: fixed. Lass es uns herausfinden:

Das sieht gar nicht gut aus. Wir brauchen die Spalte mit einer Menge Inhalt darin, um ein wenig zu biegen, während die restlichen Spalten eine feste Breite beibehalten. Ein fest table-layout value respektiert die Breite – aber so sehr, dass er den Platz der Spalte auffrisst, die den meisten Platz benötigt … was für uns ein No-Go ist.

Dies könnte leicht gelöst werden, wenn wir nur a setzen könnten min-width auf der Spalte statt a width. Auf diese Weise würde die Spalte sagen: „Ich kann Ihnen allen etwas von meiner Breite geben, bis wir diesen Mindestwert erreichen.“ Dann würde die Tabelle einfach ihren Container überlaufen lassen und dem Benutzer ein horizontales Scrollen geben, um den Rest der Tabelle anzuzeigen. Aber leider, min-width auf Tabellenspalten werden von der nicht beachtet <col> Element.

Die Lösung

Die Lösung ist, a zu fälschen min-width und wir müssen ein bisschen kreativ sein, um es zu tun.

Wir können ein Leerzeichen hinzufügen <col> als zweite Spalte für unsere <colgroup> im HTML und wende a an colspan Attribut auf der ersten Spalte, sodass die erste Spalte den Platz für beide Spalten einnimmt:

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

Beachten Sie, dass ich anstelle der Inline-Stile aus dem vorherigen Beispiel Klassen hinzugefügt habe. Die gleiche Idee gilt immer noch: Wir wenden Breiten auf jede Spalte an.

Der Trick ist diese Beziehung zwischen dem ersten <col> und die leere Sekunde <col>. Wenden wir eine Breite auf die erste an <col> (es ist 200px im Ausschnitt oben), dann wird die zweite Spalte aufgebraucht, wenn das feste Tabellenlayout den verfügbaren Platz aufteilt, um ihn auf die Spalten zu verteilen. Aber die Breite der ersten Spalte (200px) wird respektiert und bleibt bestehen.

Voilà! Wir haben eine Fälschung min-width auf eine Tabellenzelle gesetzt. Die erste Zelle biegt sich, wenn sich der verfügbare Platz ändert, und die Tabelle läuft für horizontales Scrollen über, so wie wir es uns erhofft hatten.

(Ich habe ein wenig hinzugefügt klebrige Positionierung zur ersten Spalte dort.)

Zugänglichkeit

Lassen Sie uns die Zugänglichkeit hier nicht ganz vergessen. Ich habe die Tabelle durch NVDA unter Windows und VoiceOver unter macOS laufen lassen und festgestellt, dass alle fünf Spalten angesagt werden, auch wenn wir nur vier davon verwenden. Und wenn die erste Spalte im Fokus ist, wird „Spalte eins bis zwei“ angesagt. Nicht ganz elegant, aber auch nicht dazu führen, dass sich jemand verirrt. Ich stelle mir vor, wir könnten eine werfen aria-hidden Attribut in der ungenutzten Spalte, aber wissen Sie auch, dass ARIA kein Ersatz für schlechtes HTML ist.

---

Ich gebe zu, das fühlt sich ein bisschen, ähm, hacky an. Aber es funktioniert! Lassen Sie mich wissen, wenn Sie einen anderen Ansatz in den Kommentaren haben … oder wissen Sie von Verwirrungen, die dieser „Hack“ unseren Benutzern bringen könnte.

• SEO-gestützte Content- und PR-Distribution. Holen Sie sich noch heute Verstärkung.
• Platoblockkette. Web3-Metaverse-Intelligenz. Wissen verstärkt. Hier zugreifen.
• Quelle: https://css-tricks.com/faking-min-width-on-a-table-column/