Pertanyaan Tetapkan cellpadding dan cellspacing dalam CSS?

Dalam sebuah tabel HTML, cellpadding dan cellspacing dapat diatur seperti ini:

<table cellspacing="1" cellpadding="1">

Bagaimana hal yang sama dapat dicapai dengan menggunakan CSS?

2922

2017-12-04 08:45

asal

Jawaban:

Dasar-dasar

Untuk mengontrol "cellpadding" dalam CSS, Anda cukup menggunakan padding pada sel tabel. Misalnya. untuk 10px "cellpadding":

td { 
    padding: 10px;
}

Untuk "cellspacing", Anda dapat menerapkan border-spacing Properti CSS ke tabel Anda. Misalnya. untuk 10px "cellspacing":

table { 
    border-spacing: 10px;
    border-collapse: separate;
}

Properti ini bahkan akan memungkinkan jarak horizontal dan vertikal terpisah, sesuatu yang tidak bisa Anda lakukan dengan "cellspacing" sekolah lama.

Masalah di IE <= 7

Ini akan bekerja di hampir semua browser populer kecuali untuk Internet Explorer melalui Internet Explorer 7, di mana Anda hampir kurang beruntung. Saya mengatakan "hampir" karena browser ini masih mendukung border-collapse properti, yang menggabungkan batas sel tabel yang bersebelahan. Jika Anda mencoba menghilangkan cellspacing (yaitu, cellspacing="0") kemudian border-collapse:collapse harus memiliki efek yang sama: tidak ada ruang di antara sel-sel tabel. Dukungan ini buggy, meskipun, karena tidak menimpa yang sudah ada cellspacing Atribut HTML pada elemen tabel.

Singkatnya: untuk browser non-Internet Explorer 5-7, border-spacing menangani Anda. Untuk Internet Explorer, jika situasi Anda tepat (Anda ingin 0 selspacing dan meja Anda tidak sudah didefinisikan), Anda dapat menggunakan border-collapse:collapse.

table { 
    border-spacing: 0;
    border-collapse: collapse;
}

Catatan: Untuk ikhtisar besar properti CSS yang dapat diterapkan ke tabel dan untuk browser mana, lihat ini halaman Quirksmode yang fantastis.

3226

2017-07-09 02:34

Default

Perilaku default peramban setara dengan:

table {border-collapse: collapse;}
td    {padding: 0px;}

enter image description here

Cellpadding

Menetapkan jumlah ruang antara isi sel dan dinding sel

table {border-collapse: collapse;}
td    {padding: 6px;}

enter image description here

Cellspacing

Mengontrol ruang di antara sel tabel

table {border-spacing: 2px;}
td    {padding: 0px;}

enter image description here

Kedua

table {border-spacing: 2px;}
td    {padding: 6px;}

enter image description here

Keduanya (khusus)

table {border-spacing: 8px 2px;}
td    {padding: 6px;}

enter image description here

catatan: Jika ada border-spacing mengatur, itu menunjukkan border-collapse milik meja adalah separate.

Cobalah sendiri!

Sini Anda dapat menemukan cara html lama untuk mencapai ini.

849

2018-06-12 10:24

table
{
    border-collapse: collapse; /* 'cellspacing' equivalent */
}

table td, table th
{
    padding: 0; /* 'cellpadding' equivalent */
}

313

2017-08-24 15:17

Pengaturan margin pada sel tabel tidak benar-benar memiliki efek sejauh yang saya tahu. Persamaan CSS yang benar untuk cellspacing aku s border-spacing - tetapi tidak berfungsi di Internet Explorer.

Kamu dapat memakai border-collapse: collapse untuk menetapkan jarak sel ke 0 sebagaimana disebutkan, tetapi untuk nilai lainnya, saya pikir satu-satunya cara lintas-browser adalah tetap menggunakan cellspacing atribut.

104

2017-12-04 09:18

Peretasan ini berfungsi untuk Internet Explorer 6 dan yang lebih baru, Google Chrome, Firefox, dan Opera:

table {
    border-collapse: separate;
    border-spacing: 10px; /* cellspacing */
    *border-collapse: expression('separate', cellSpacing = '10px');
}

table td, table th {
    padding: 10px; /* cellpadding */
}

Itu * deklarasi untuk Internet Explorer 6 dan 7, dan peramban lain akan mengabaikannya dengan tepat.

expression('separate', cellSpacing = '10px') kembali 'separate', tetapi kedua pernyataan dijalankan, seperti dalam JavaScript Anda dapat menyampaikan argumen lebih dari yang diharapkan dan semua dari mereka akan dievaluasi.

2017-12-05 04:30

Bagi mereka yang menginginkan nilai non-zero cellspacing, CSS berikut bekerja untuk saya, tetapi saya hanya bisa mengujinya di Firefox. Lihat Quirksmode link diposting di tempat lain untuk detail kompatibilitas. Sepertinya ini mungkin tidak berfungsi dengan versi Internet Explorer yang lebih lama.

table {
    border-collapse: separate;
    border-spacing: 2px;
}

2017-08-20 03:32

Solusi sederhana untuk masalah ini adalah:

table
{
    border: 1px solid #000000;
    border-collapse: collapse;
    border-spacing: 0px;
}
table td
{
    padding: 8px 8px;
}

2017-12-08 16:04

Juga, jika Anda mau cellspacing="0", jangan lupa tambahkan border-collapse: collapse di dalam kamu tablestylesheet.

2017-12-04 09:06

Pertanyaan Tetapkan cellpadding dan cellspacing dalam CSS?

Jawaban:

Default

Cellpadding

Cellspacing

Kedua

Keduanya (khusus)

Pertanyaan Populer