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.

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!

Kenyataan Laman Web ini

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

Alat AI Hot

Undresser.AI Undress

Apl berkuasa AI untuk mencipta foto bogel yang realistik

AI Clothes Remover

Alat AI dalam talian untuk mengeluarkan pakaian daripada foto.

Undress AI Tool

Gambar buka pakaian secara percuma

Clothoff.io

Penyingkiran pakaian AI

Video Face Swap

Tukar muka dalam mana-mana video dengan mudah menggunakan alat tukar muka AI percuma kami!

Tunjukkan Lagi

Artikel Panas

Bagaimana untuk memperbaiki KB5055523 gagal dipasang di Windows 11?

3 minggu yang lalu By DDD

Bagaimana untuk memperbaiki KB5055518 gagal dipasang di Windows 10?

3 minggu yang lalu By DDD

Tahap kekuatan untuk setiap musuh & raksasa di R.E.P.O.

3 minggu yang lalu By 尊渡假赌尊渡假赌尊渡假赌

<🎜>: Rails Dead - Cara menjinakkan serigala

3 minggu yang lalu By DDD

Putera Biru: Cara sampai ke ruangan bawah tanah

3 minggu yang lalu By DDD

Tunjukkan Lagi

Alat panas

Notepad++7.3.1

Editor kod yang mudah digunakan dan percuma

SublimeText3 versi Cina

Versi Cina, sangat mudah digunakan

Hantar Studio 13.0.1

Persekitaran pembangunan bersepadu PHP yang berkuasa

Dreamweaver CS6

Alat pembangunan web visual

SublimeText3 versi Mac

Perisian penyuntingan kod peringkat Tuhan (SublimeText3)

Tunjukkan Lagi

Topik panas

Tutorial Java

1655

14

Tutorial CakePHP

1413

52

Tutorial Laravel

1306

25

Tutorial PHP

1252

29

Tutorial C#

1226

24

Tunjukkan Lagi