Memalsukan Lebar Min pada Kolom Tabel

Yang baik <table> tag adalah HTML paling semantik untuk menampilkan data tabular. Tapi saya merasa sangat sulit untuk mengontrol bagaimana tabel disajikan, terutama lebar kolom dalam lingkungan yang dinamis di mana Anda mungkin tidak tahu berapa banyak konten yang masuk ke setiap sel tabel. Dalam beberapa kasus, satu kolom sangat lebar sementara yang lain dikerutkan. Di lain waktu, kami mendapatkan lebar yang sama, tetapi mengorbankan kolom yang berisi lebih banyak konten dan membutuhkan lebih banyak ruang.

Tapi saya menemukan solusi trik-y CSS yang membantu membuat segalanya menjadi sedikit lebih mudah. Itulah yang ingin saya tunjukkan pada postingan ini.

Masalahnya

Pertama kita perlu memahami bagaimana tata letak ditangani oleh browser. Kami memiliki table-layout properti di CSS untuk menentukan bagaimana tabel harus mendistribusikan lebar untuk setiap kolom tabel. Dibutuhkan salah satu dari dua nilai:

• auto (Default)
• fixed

Mari kita mulai dengan sebuah tabel tanpa menentukan lebar apapun pada kolomnya. Dengan kata lain, kami akan membiarkan browser memutuskan berapa banyak lebar untuk diberikan pada setiap kolom dengan menerapkan table-layout: auto di atasnya dalam CSS. Seperti yang akan Anda lihat, browser melakukan yang terbaik dengan algoritme yang dimilikinya untuk membagi lebar penuh yang tersedia di antara setiap kolom.

Jika kita menukar tata letak tabel otomatis dengan table-layout: fixed, maka browser hanya akan membagi ruang penuh yang tersedia dengan jumlah total kolom, lalu menerapkan nilai tersebut sebagai lebar untuk setiap kolom:

Tapi bagaimana jika kita ingin mengontrol lebar kolom kita? Kami memiliki <colgroup> elemen untuk membantu! Ini terdiri dari individu <col> elemen yang bisa kita gunakan untuk menentukan lebar yang tepat yang kita butuhkan untuk setiap kolom. Mari kita lihat bagaimana cara kerjanya table-layout: auto:

Saya telah menggarisbawahi gaya demi ilustrasi.

Browser tidak menghormati lebar sebaris karena melebihi jumlah ruang tabel yang tersedia saat ditambahkan. Akibatnya, tabel mencuri ruang dari kolom sehingga semua kolom terlihat. Ini adalah perilaku default yang sangat bagus.

Bagaimana <colgroup> bekerja dengan table-layout: fixed. Mari cari tahu:

Ini tidak terlihat bagus sama sekali. Kami membutuhkan kolom dengan banyak konten di dalamnya untuk sedikit melenturkan sambil mempertahankan lebar tetap untuk kolom lainnya. Sebuah tetap table-layout nilai menghormati lebar — tetapi sedemikian rupa sehingga memakan ruang kolom yang membutuhkan ruang paling banyak… yang tidak boleh digunakan bagi kami.

Ini dapat dengan mudah diselesaikan jika saja kita dapat mengatur a min-width pada kolom bukan a width. Dengan begitu, kolom akan berkata, "Saya dapat memberikan lebar saya kepada Anda semua sampai kita mencapai nilai minimum ini." Kemudian tabel hanya akan meluap dari wadahnya dan memberikan pengguna gulungan horizontal untuk menampilkan sisa tabel. Tapi sayangnya, min-width pada kolom tabel tidak dihormati oleh <col> elemen.

Solusinya

Solusinya adalah memalsukan a min-width dan kita perlu sedikit kreatif untuk melakukannya.

Kita bisa menambahkan yang kosong <col> sebagai kolom kedua untuk kami <colgroup> dalam HTML dan terapkan a colspan atribut pada kolom pertama sehingga kolom pertama menempati ruang untuk kedua kolom:

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

Perhatikan bahwa saya telah menambahkan kelas sebagai pengganti gaya inline dari contoh sebelumnya. Ide yang sama masih berlaku: kami menerapkan lebar ke setiap kolom.

Triknya adalah hubungan antara yang pertama <col> dan yang kedua kosong <col>. Jika kita menerapkan lebar ke yang pertama <col> (nya 200px dalam cuplikan di atas), maka kolom kedua akan dimakan ketika tata letak tabel tetap membagi ruang yang tersedia untuk didistribusikan ke kolom. Tapi lebar kolom pertama (200px) dihormati dan tetap pada tempatnya.

Voila! Kami memiliki palsu min-width diatur pada sel tabel. Sel pertama melentur saat ruang yang tersedia berubah dan tabel meluap untuk pengguliran horizontal seperti yang kami harapkan.

(Saya menambahkan sedikit posisi lengket ke kolom pertama di sana.)

Aksesibilitas

Jangan lupakan sepenuhnya tentang aksesibilitas di sini. Saya menjalankan tabel melalui NVDA di Windows dan VoiceOver di macOS dan menemukan bahwa kelima kolom diumumkan, meskipun kami hanya menggunakan empat kolom. Dan ketika kolom pertama dalam fokus, itu mengumumkan, "Kolom satu sampai dua". Tidak terlalu elegan tapi juga tidak akan membuat seseorang tersesat. Saya membayangkan kita bisa melempar aria-hidden atribut pada kolom yang tidak digunakan, tetapi ketahui juga bahwa ARIA bukanlah pengganti untuk HTML yang buruk.

---

Saya akui, ini terasa sedikit, um, hacky. Tapi itu berhasil! Beri tahu saya jika Anda memiliki pendekatan yang berbeda dalam komentar… atau ketahui adanya kebingungan yang mungkin ditimbulkan oleh "peretasan" ini kepada pengguna kami.

• Konten Bertenaga SEO & Distribusi PR. Dapatkan Amplifikasi Hari Ini.
• Platoblockchain. Intelijen Metaverse Web3. Pengetahuan Diperkuat. Akses Di Sini.
• Sumber: https://css-tricks.com/faking-min-width-on-a-table-column/