Προσποίηση ελάχιστου πλάτους σε στήλη πίνακα

το καλό <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 Η τιμή σέβεται το πλάτος — αλλά τόσο πολύ που κατατρώει τον χώρο της στήλης που χρειάζεται τον περισσότερο χώρο… που είναι απαγορευτικό για εμάς.

Αυτό θα μπορούσε εύκολα να λυθεί αν μπορούσαμε να ορίσουμε ένα min-width στη στήλη αντί για α width. Με αυτόν τον τρόπο, η στήλη θα έλεγε, "Μπορώ να δώσω σε όλους σας λίγο από το πλάτος μου μέχρι να φτάσουμε σε αυτήν την ελάχιστη τιμή." Στη συνέχεια, ο πίνακας θα ξεχείλιζε απλώς το κοντέινερ του και θα έδινε στον χρήστη μια οριζόντια κύλιση για να εμφανίσει το υπόλοιπο του πίνακα. Αλλά δυστυχώς, min-width στις στήλες του πίνακα δεν τηρούνται από το <col> στοιχείο.

Η λύση

Η λύση είναι το ψεύτικο α min-width και πρέπει να είμαστε λίγο δημιουργικοί για να το κάνουμε.

Μπορούμε να προσθέσουμε ένα κενό <col> ως δεύτερη στήλη για μας <colgroup> στο HTML και εφαρμόστε α 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) γίνεται σεβαστό και παραμένει στη θέση του.

Voila! Έχουμε ένα ψεύτικο min-width σε ένα κελί πίνακα. Το πρώτο κελί λυγίζει καθώς αλλάζει ο διαθέσιμος χώρος και ο πίνακας ξεχειλίζει για οριζόντια κύλιση όπως ακριβώς ελπίζαμε.

(Έχω προσθέσει λίγο κολλώδης τοποθέτηση στην πρώτη στήλη εκεί.)

Προσβασιμότητα

Ας μην ξεχνάμε εντελώς την προσβασιμότητα εδώ. Έτρεξα τον πίνακα μέσω του NVDA στα Windows και του VoiceOver στο macOS και διαπίστωσα ότι ανακοινώνονται και οι πέντε στήλες, ακόμα κι αν χρησιμοποιούμε μόνο τέσσερις από αυτές. Και όταν η πρώτη στήλη είναι στο επίκεντρο, ανακοινώνει, "Στήλη μία έως δύο". Δεν είναι απόλυτα κομψό αλλά ούτε πρόκειται να κάνει κάποιον να χαθεί. Φαντάζομαι ότι θα μπορούσαμε να ρίξουμε ένα aria-hidden χαρακτηριστικό στη στήλη που δεν χρησιμοποιείται, αλλά επίσης να γνωρίζετε ότι το ARIA δεν υποκαθιστά την κακή HTML.

---

Θα παραδεχτώ, μου φαίνεται λίγο, χμ, χάκι. Αλλά λειτουργεί! Ενημερώστε με εάν έχετε διαφορετική προσέγγιση στα σχόλια… ή γνωρίζετε τυχόν σύγχυση που μπορεί να προκαλέσει αυτή η «χάκα» στους χρήστες μας.

• SEO Powered Content & PR Distribution. Ενισχύστε σήμερα.
• Platoblockchain. Web3 Metaverse Intelligence. Ενισχύθηκε η γνώση. Πρόσβαση εδώ.
• πηγή: https://css-tricks.com/faking-min-width-on-a-table-column/