[html] CSS 테이블 레이아웃 : 테이블 행이 여백을 허용하지 않는 이유는 무엇입니까?

Program / 글쓴이 
.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-rowDIV의 높이는 그 안에있는 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 로 설정 하는 것 입니다. 그러나 이것은 당신이 margin-bottom을 원했기 때문에 테이블의 상단 가장자리에 공간을 남겨두고 목적을 달성하지 못합니다.

답변

아래쪽 여백을 .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
}