Saya memiliki dua div di sini:
<div style="display:table-cell" id="div1">
content
</div>
<div style="display:table-cell" id="div2">
content
</div>
Apakah ada cara untuk memberi jarak antara dua div ini (yang memiliki display:table-cell
)?
html
css
css-tables
Sistem-x32z
sumber
sumber
position: relative
,.position: relative
padatable-*-group
,table-row
,table-column
,table-cell
, dantable-caption
unsur-unsur tidak terdefinisi.border-right: 10px solid #FFF
. Ini bekerja dengan baik untuk saya saat mendesain menu dropdown CSS ketika saya menginginkan ruang antartable-cell
elemen.Gunakan batas transparan jika memungkinkan.
Demo JSFiddle
https://jsfiddle.net/74q3na62/
HTML
CSS
Penjelasan
Anda dapat menggunakan
border-spacing
properti, seperti yang disarankan oleh jawaban yang diterima, tetapi ini tidak hanya menghasilkan spasi di antara sel tabel tetapi juga antara sel tabel dan wadah tabel. Ini mungkin tidak diinginkan.Jika Anda tidak memerlukan batas yang terlihat pada sel tabel Anda, maka Anda harus menggunakan
transparent
batas untuk menghasilkan margin sel. Batas transparan memerlukan pengaturanbackground-clip: padding-box;
karena jika warna latar belakang sel tabel ditampilkan di tepi.Bingkai transparan dan klip latar belakang didukung di IE9 ke atas (dan semua browser modern lainnya). Jika Anda memerlukan kompatibilitas IE8 atau tidak memerlukan ruang transparan aktual, Anda dapat mengatur warna tepi putih dan membiarkannya
background-clip
.sumber
sumber
Nah, cara di atas berhasil, berikut adalah solusi saya yang memerlukan sedikit markup dan lebih fleksibel.
sumber
Buat div baru dengan nama apa pun (saya hanya akan menggunakan table-split) dan memberinya lebar, tanpa menambahkan konten ke dalamnya, sambil menempatkannya di antara div yang diperlukan yang perlu dipisahkan.
Anda dapat menambahkan lebar apa pun yang menurut Anda perlu. Saya hanya menggunakan 0,6% karena itulah yang saya butuhkan ketika saya harus melakukan ini.
sumber