spasi di antara div - menampilkan sel tabel

97

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)?

Sistem-x32z
sumber

Jawaban:

192

Anda dapat menggunakan border-spacingproperti:

HTML:

<div class="table">
    <div class="row">
        <div class="cell">Cell 1</div>
        <div class="cell">Cell 2</div>
    </div>
</div>

CSS:

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

.row { display:table-row; }

.cell {
  display:table-cell;
  padding:5px;
  background-color: gold;
}

Demo JSBin

Ada pilihan lain?

Yah , tidak juga.

Mengapa?

  • marginproperti tidak berlaku untuk display: table-cellelemen.
  • padding properti tidak membuat ruang antar tepi sel.
  • floatproperti menghancurkan perilaku table-cellelemen yang diharapkan yang bisa setinggi elemen induknya.
Hashem Qolami
sumber
Ada pilihan lain? Tentu position: relative,.
Jongosi
@Jongosi Menurut spesifikasi : Pengaruh position: relativepada table-*-group, table-row, table-column, table-cell, dan table-captionunsur-unsur tidak terdefinisi.
Hashem Qolami
3
Anda juga dapat membuat garis tepi satu sisi dengan warna yang sama dengan latar belakang. border-right: 10px solid #FFF. Ini bekerja dengan baik untuk saya saat mendesain menu dropdown CSS ketika saya menginginkan ruang antar table-cellelemen.
armadadrive
1
Anda juga dapat menambahkan sel hanya untuk penspasian. Tidak ideal, tetapi setidaknya Anda terhindar dari sakit kepala karena mencoba mematikan spasi pada sel paling kanan.
Daniel
Saya juga ingin "padding" hanya berada di 1 tepi "cell", jadi saya harus menggunakan solusi armadadrive kecuali saya menggunakan warna border rgba (0,0,0,0) untuk border transparan jadi saya tidak perlu khawatir tentang warna / gambar background. border-right: 10px solid rgba (0,0,0,0);
JAX
20

Gunakan batas transparan jika memungkinkan.

Demo JSFiddle

https://jsfiddle.net/74q3na62/

HTML

<div class="table">
    <div class="row">
        <div class="cell">Cell 1</div>
        <div class="cell">Cell 2</div>
        <div class="cell">Cell 3</div>
    </div>
</div>

CSS

.table {
  display: table;
  border: 1px solid black;
}

.row { display:table-row; }

.cell {
  display: table-cell;
  background-clip: padding-box;
  background-color: gold;
  border-right: 10px solid transparent;
}

.cell:last-child {
  border-right: 0 none;
}

Penjelasan

Anda dapat menggunakan border-spacingproperti, 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 transparentbatas untuk menghasilkan margin sel. Batas transparan memerlukan pengaturan background-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.

Max
sumber
Setting 'border-right' sebenarnya cukup untuk memberikan jarak antara, tidak perlu deklarasi "table".
forsberg
0
<div style="display:table;width:100%"  >
<div style="display:table-cell;width:49%" id="div1">
content
</div>

<!-- space between divs - display table-cell -->
<div style="display:table-cell;width:1%" id="separated"></div>
<!-- //space between divs - display table-cell -->

<div style="display:table-cell;width:50%" id="div2">
content
</div>
</div>
jalalBK
sumber
0

Nah, cara di atas berhasil, berikut adalah solusi saya yang memerlukan sedikit markup dan lebih fleksibel.

.cells {
  display: inline-block;
  float: left;
  padding: 1px;
}
.cells>.content {
  background: #EEE;
  display: table-cell;
  float: left;
  padding: 3px;
  vertical-align: middle;
}
<div id="div1" class="cells"><div class="content">My Cell 1</div></div>
<div id="div2" class="cells"><div class="content">My Cell 2</div></div>

Gareth Clarke
sumber
-6

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.

.table-split {
  display: table-cell;
  width: 0.6%
}
<div class="table-split"></div>

Segera
sumber
10
Ini adalah solusi yang buruk.
1
Ini adalah strategi umum ketika elemen tabel sebenarnya digunakan untuk tujuan tata letak, dan sebagian alasan mengapa metodologi tersebut sekarang sudah usang.
rakitin
Karena hanya dapat dilakukan dengan css, penggunaan html harus dihindari
Toni Michel Caubet