spasi di antara div - menampilkan sel tabel

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

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.

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.

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

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>

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>