แกล้งทำความกว้างขั้นต่ำบนคอลัมน์ตาราง

คนดี <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 และการเผยแพร่ประชาสัมพันธ์ รับการขยายวันนี้
• เพลโตบล็อคเชน Web3 Metaverse ข่าวกรอง ขยายความรู้. เข้าถึงได้ที่นี่.
• ที่มา: https://css-tricks.com/faking-min-width-on-a-table-column/