Bolehkah CSS Mengawal Lebar Sel Jadual Tanpa mengira Saiz Kandungan?

Mengawal Lebar Sel Jadual dengan CSS

Dalam bidang jadual HTML, memastikan lebar seragam sel jadual boleh menjadi satu cabaran apabila berurusan dengan kandungan saiz yang berbeza-beza. Bolehkah kita mencapai hasil yang diinginkan ini semata-mata melalui CSS, tanpa mengira bilangan sel yang terlibat?

Struktur HTML adalah mudah: ibu bapa

berfungsi sebagai bekas meja, manakala kanak-kanak

elemen mewakili sel jadual.

<code class="html"><div style="display: table;">
  <div style="display: table-cell;"></div>
  <div style="display: table-cell;"></div>
</div></code>

CSS boleh dimanfaatkan untuk menangani isu ini. Untuk memastikan lebar sel yang sama, tanpa mengira saiz kandungan, kita perlu:

1. Cetuskan Mekanisme Reka Letak Jadual Tetap: Tetapkan susun atur jadual: tetap; pada induk
   . Ini mengarahkan penyemak imbas untuk menguatkuasakan lebar sel yang ditentukan dan bukannya melaraskannya secara automatik kepada kandungan.
2. Tetapkan Lebar pada Sel Jadual: Walaupun tidak wajib, tetapkan lebar kecil (mis., 2 %) kepada setiap
   mewakili sel jadual bertindak sebagai pencetus untuk susun atur jadual tetap.

   Kod CSS akhir dipaparkan seperti berikut:

   <code class="css">div {
     display: table;
     width: 250px;
     table-layout: fixed;
   }
   
   div > div {
     display: table-cell;
     width: 2%;
   }</code>

   Dengan pendekatan ini, sel jadual akan mengekalkan persamaan lebar, memastikan penampilan yang konsisten tanpa mengira kandungannya.