ช่องว่างระหว่าง divs - แสดงตารางเซลล์

ฉันมีสอง div ที่นี่:

<div style="display:table-cell" id="div1">
    content
</div>

<div style="display:table-cell" id="div2">
    content
</div>

มีวิธีทำให้มีช่องว่างระหว่างสอง div (ที่มีdisplay:table-cell) นี้หรือไม่?

คุณสามารถใช้border-spacingคุณสมบัติ:

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

การสาธิต JSBin

ตัวเลือกอื่น ๆ ?

ดีไม่จริง

ทำไม?

• marginคุณสมบัติไม่สามารถใช้ได้กับdisplay: table-cellองค์ประกอบ
• padding คุณสมบัติไม่สร้างช่องว่างระหว่างขอบของเซลล์
• floatคุณสมบัติทำลายพฤติกรรมที่คาดหวังของtable-cellองค์ประกอบซึ่งสามารถสูงได้เท่ากับองค์ประกอบหลัก

ใช้เส้นขอบโปร่งใสถ้าเป็นไปได้

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

คำอธิบาย

คุณสามารถใช้border-spacingคุณสมบัติตามที่คำตอบที่ยอมรับแนะนำ แต่สิ่งนี้ไม่เพียง แต่สร้างช่องว่างระหว่างเซลล์ตารางเท่านั้น แต่ยังสร้างระหว่างเซลล์ตารางและคอนเทนเนอร์ของตารางด้วย สิ่งนี้อาจไม่ต้องการ

หากคุณไม่ต้องการเส้นขอบที่มองเห็นได้บนเซลล์ตารางของคุณคุณควรใช้transparentเส้นขอบเพื่อสร้างระยะขอบเซลล์ เส้นขอบโปร่งใสจำเป็นต้องมีการตั้งค่าbackground-clip: padding-box;เนื่องจากมิฉะนั้นสีพื้นหลังของเซลล์ตารางจะแสดงบนเส้นขอบ

ขอบโปร่งใสและคลิปพื้นหลังได้รับการสนับสนุนใน IE9 ขึ้นไป (และเบราว์เซอร์สมัยใหม่อื่น ๆ ทั้งหมด) หากคุณต้องการความเข้ากันได้กับ IE8 หรือไม่ต้องการพื้นที่โปร่งใสจริงคุณสามารถตั้งค่าสีขอบสีขาวและออก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>

ข้างต้นใช้งานได้นี่คือวิธีแก้ปัญหาของฉันที่ต้องใช้มาร์กอัปน้อยลงเล็กน้อยและมีความยืดหยุ่นมากกว่า

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

สร้าง div ใหม่ด้วยชื่ออะไรก็ได้ (ฉันจะใช้ table-split) และกำหนดความกว้างโดยไม่ต้องเพิ่มเนื้อหาในขณะที่วางไว้ระหว่าง div ที่จำเป็นที่ต้องแยก

คุณสามารถเพิ่มความกว้างเท่าที่จำเป็นได้ ฉันเพิ่งใช้ไป 0.6% เพราะเป็นสิ่งที่ฉันต้องการเมื่อต้องทำสิ่งนี้

.table-split {
  display: table-cell;
  width: 0.6%
}

<div class="table-split"></div>