זיוף רוחב מינימלי על עמודת שולחן

הישן הטוב <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) מכובד ונשאר במקומו.

וואלה! יש לנו זיוף min-width מוגדר על תא טבלה. התא הראשון מתגמש כשהשטח הפנוי משתנה והטבלה עולה על גדותיה לגלילה אופקית בדיוק כפי שקיווינו שתהיה.

(הוספתי קצת מיקום דביק לעמוד הראשון שם.)

נגישות

בואו לא נשכח לגמרי את הנגישות כאן. העברתי את הטבלה דרך NVDA ב-Windows ו-VoiceOver ב-macOS וגיליתי שכל חמש העמודות מוכרזות, גם אם אנחנו משתמשים רק בארבע מהן. וכשהעמודה הראשונה ממוקדת, היא מכריזה "עמודה אחת עד שתיים". לא אלגנטי לחלוטין אבל גם לא הולך לגרום למישהו ללכת לאיבוד. אני מתאר לעצמי שנוכל לזרוק aria-hidden תכונה בעמודה שאינה בשימוש, אבל גם יודע ש-ARIA אינו תחליף ל-HTML גרוע.

---

אני מודה, זה מרגיש קצת, אממ, פריצה. אבל זה כן עובד! הודע לי אם יש לך גישה אחרת בתגובות... או יודע על בלבולים שה"פריצה" הזו עשויה להביא למשתמשים שלנו.

• הפצת תוכן ויחסי ציבור מופעל על ידי SEO. קבל הגברה היום.
• Platoblockchain. Web3 Metaverse Intelligence. ידע מוגבר. גישה כאן.
• מקור: https://css-tricks.com/faking-min-width-on-a-table-column/