เค้าโครงตาราง CSS: เหตุใดแถวตารางจึงไม่ยอมรับระยะขอบ

.container {
  width: 850px;
  padding: 0;
  display: table;
  margin-left: auto;
  margin-right: auto;
}
.row {
  display: table-row;
  margin-bottom: 30px;
  /* HERE */
}
.home_1 {
  width: 64px;
  height: 64px;
  padding-right: 20px;
  margin-right: 10px;
  display: table-cell;
}
.home_2 {
  width: 350px;
  height: 64px;
  padding: 0px;
  vertical-align: middle;
  font-size: 150%;
  display: table-cell;
}
.home_3 {
  width: 64px;
  height: 64px;
  padding-right: 20px;
  margin-right: 10px;
  display: table-cell;
}
.home_4 {
  width: 350px;
  height: 64px;
  padding: 0px;
  vertical-align: middle;
  font-size: 150%;
  display: table-cell;
}

<div class="container">
  <div class="row">
    <div class="home_1"></div>
    <div class="home_2"></div>
    <div class="home_3"></div>
    <div class="home_4"></div>
  </div>

  <div class="row">
    <div class="home_1"></div>
    <div class="home_2"></div>
  </div>
</div>

คำถามของฉันสัมพันธ์กับบรรทัดที่ทำเครื่องหมายไว้ HEREใน CSS ฉันพบว่าแถวนั้นอยู่ใกล้กันเกินไปฉันจึงพยายามเพิ่มระยะขอบล่างเพื่อแยกออก น่าเสียดายที่มันไม่ทำงาน ฉันต้องเพิ่มระยะขอบให้กับเซลล์ตารางเพื่อแยกแถว

อะไรคือเหตุผลเบื้องหลังพฤติกรรมนี้

นอกจากนี้ยังสามารถใช้กลยุทธ์นี้เพื่อจัดวางเค้าโครงขณะที่ฉันกำลังทำอยู่ได้หรือไม่:

[icon] - text      [icon] - text
[icon] - text      [icon] - text

หรือมีกลยุทธ์ที่ดีกว่านี้ไหม

ดูมาตรฐาน CSS 2.1 หัวข้อ 17.5.3 เมื่อคุณใช้display:table-rowความสูงของ DIV จะถูกกำหนดโดยความสูงของtable-cellองค์ประกอบในนั้นเท่านั้น ดังนั้นระยะขอบช่องว่างภายในและความสูงขององค์ประกอบเหล่านั้นจึงไม่มีผล

http://www.w3.org/TR/CSS2/tables.html

วิธีแก้ปัญหานี้เป็นอย่างไร (โดยใช้ตารางจริง)

table {
    border-collapse: collapse;
}

tr.row {
    border-bottom: solid white 30px; /* change "white" to your background color */
}

มันไม่ได้เป็นแบบไดนามิกเนื่องจากคุณต้องกำหนดสีของเส้นขอบอย่างชัดเจน (เว้นแต่จะมีวิธีแก้ไขด้วย) แต่นี่เป็นสิ่งที่ฉันกำลังทดลองกับโปรเจ็กต์ของฉันเอง

แก้ไขเพื่อรวมความคิดเห็นเกี่ยวกับtransparent:

tr.row {
    border-bottom: 30px solid transparent;
}

สิ่งที่ใกล้เคียงที่สุดที่ฉันเห็นคือการตั้งค่าborder-spacing: 0 30px;เป็นคอนเทนเนอร์ div อย่างไรก็ตามสิ่งนี้ทำให้ฉันมีที่ว่างที่ขอบด้านบนของตารางซึ่งเอาชนะจุดประสงค์เนื่องจากคุณต้องการระยะขอบล่าง

คุณได้ลองตั้งค่าขอบล่าง.row divเป็น "เซลล์" ของคุณแล้วหรือยัง เมื่อคุณทำงานกับตาราง HTML จริงคุณไม่สามารถกำหนดระยะขอบเป็นแถวได้เช่นกัน - เฉพาะเซลล์

มีการแก้ไขที่ค่อนข้างง่ายสำหรับสิ่งนี้แอตทริบิวต์border-spacingและborder-collapseCSS ทำงานdisplay: tableได้

คุณสามารถใช้สิ่งต่อไปนี้เพื่อรับช่องว่าง / ระยะขอบในเซลล์ของคุณ

.container {
  width: 850px;
  padding: 0;
  display: table;
  margin-left: auto;
  margin-right: auto;
  border-collapse: separate;
  border-spacing: 15px;
}

.row {
  display: table-row;
}

.home_1 {
  width: 64px;
  height: 64px;
  padding-right: 20px;
  margin-right: 10px;
  display: table-cell;
}

.home_2 {
  width: 350px;
  height: 64px;
  padding: 0px;
  vertical-align: middle;
  font-size: 150%;
  display: table-cell;
}

.home_3 {
  width: 64px;
  height: 64px;
  padding-right: 20px;
  margin-right: 10px;
  display: table-cell;
}

.home_4 {
  width: 350px;
  height: 64px;
  padding: 0px;
  vertical-align: middle;
  font-size: 150%;
  display: table-cell;
}

<div class="container">
  <div class="row">
    <div class="home_1">Foo</div>
    <div class="home_2">Foo</div>
    <div class="home_3">Foo</div>
    <div class="home_4">Foo</div>
  </div>

  <div class="row">
    <div class="home_1">Foo</div>
    <div class="home_2">Foo</div>
  </div>
</div>

โปรดทราบว่าคุณต้องมี

border-collapse: separate;

มิฉะนั้นมันจะไม่ทำงาน.

ซอ

 .row-seperator{
   border-top: solid transparent 50px;
 }

<table>
   <tr><td>Section 1</td></tr>
   <tr><td>row1 1</td></tr>
   <tr><td>row1 2</td></tr>
   <tr>
      <td class="row-seperator">Section 2</td>
   </tr>
   <tr><td>row2 1</td></tr>
   <tr><td>row2 2</td></tr>
</table>


#Outline
Section 1
row1 1
row1 2


Section 2
row2 1
row2 2

นี่อาจเป็นอีกทางเลือกหนึ่ง

เพิ่มระยะห่างระหว่างสององค์ประกอบจากนั้นทำให้มองไม่เห็น:

<img src="#" />
<span class="spacer">---</span>
<span>Text TEXT</span>

.spacer {
    visibility: hidden
}

งาน - เพิ่มระยะห่างในตาราง

#options table {
  border-spacing: 8px;
}

หากคุณต้องการระยะขอบเฉพาะเช่น 20px คุณสามารถวางตารางไว้ใน div

<div id="tableDiv">
    <table>
      <tr>
        <th> test heading </th>
      </tr>
      <tr>
        <td> test data </td>
      </tr>
    </table>
</div>

ดังนั้น #tableDiv จึงมีระยะขอบ 20px แต่ตารางมีความกว้าง 100% บังคับให้ตารางมีความกว้างเต็มยกเว้นขอบด้านใดด้านหนึ่ง

#tableDiv {
  margin: 20px;
}

table {
  width: 100%;
}

การเพิ่มแท็ก br ระหว่าง div ทำงานได้ เพิ่มแท็ก br ระหว่างสอง div ที่แสดง: table-row ในพาเรนต์ที่มี display: table