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?
Pertanyaan Tetapkan cellpadding dan cellspacing dalam 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;}
Cellpadding
Menetapkan jumlah ruang antara isi sel dan dinding sel
table {border-collapse: collapse;}
td {padding: 6px;}
Cellspacing
Mengontrol ruang di antara sel tabel
table {border-spacing: 2px;}
td {padding: 0px;}
Kedua
table {border-spacing: 2px;}
td {padding: 6px;}
Keduanya (khusus)
table {border-spacing: 8px 2px;}
td {padding: 6px;}
catatan: Jika ada
border-spacingmengatur, itu menunjukkanborder-collapsemilik meja adalahseparate.
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.
84
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;
}
61
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;
}
44
2017-12-08 16:04
Juga, jika Anda mau cellspacing="0", jangan lupa tambahkan border-collapse: collapse di dalam kamu tablestylesheet.
40
2017-12-04 09:06