Rumah >hujung hadapan web >tutorial css >Bolehkah CSS Mengawal Lebar Sel Jadual Tanpa mengira Saiz Kandungan?

Bolehkah CSS Mengawal Lebar Sel Jadual Tanpa mengira Saiz Kandungan?

DDDasal: 2024-11-05 01:36:02410semak imbas

Can CSS Control Table Cell Widths Regardless of Content Size?

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:

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

Atas ialah kandungan terperinci Bolehkah CSS Mengawal Lebar Sel Jadual Tanpa mengira Saiz Kandungan?. Untuk maklumat lanjut, sila ikut artikel berkaitan lain di laman web China PHP!

css html for while auto number this table issue

Kenyataan：

Kandungan artikel ini disumbangkan secara sukarela oleh netizen, dan hak cipta adalah milik pengarang asal. Laman web ini tidak memikul tanggungjawab undang-undang yang sepadan. Jika anda menemui sebarang kandungan yang disyaki plagiarisme atau pelanggaran, sila hubungi admin@php.cn

Artikel sebelumnya：Bagaimana untuk Menjajarkan Label Bersebelahan dengan Input dalam Borang?Artikel seterusnya：Bagaimana untuk Menjajarkan Label Bersebelahan dengan Input dalam Borang?

Artikel berkaitan

Lihat lagi