[css] 테두리를 축소하는 방법 (div에서)?

Program / 글쓴이

http://jsfiddle.net/R8eCr/1/ 과 같은 마크 업이 있다고 가정합니다.

<div class="container">
    <div class="column">
        <div class="cell"></div>
        <div class="cell"></div>
        <div class="cell"></div>
    </div>
    <div class="column">
        <div class="cell"></div>
        <div class="cell"></div>
        <div class="cell"></div>
    </div>
    <div class="column">
        <div class="cell"></div>
        <div class="cell"></div>
        <div class="cell"></div>
    </div>
    ...
</div>

그런 다음 CSS

.container {
    display: table;
    border-collapse: collapse;
}
.column {
    float: left;
    overflow: hidden;
    width: 120px;
}
.cell {
    display: table-cell;
    border: 1px solid red;
    width: 120px;
    height: 20px;
    -webkit-box-sizing: border-box;
    -moz-box-sizing: border-box;
    box-sizing: border-box;
}

나는 외부 div와 display: table; border-collapse: collapse;셀이 있는데 display: table-cell왜 여전히 붕괴되지 않습니까? 내가 여기서 무엇을 놓치고 있습니까?

그건 그렇고 열에 가변 수의 셀이 있으므로 한쪽에만 테두리를 가질 수 없습니다.

답변

여기에 데모가 있습니다

먼저 구문 오류를 수정해야합니다.

display: table-cell;

아니 diaplay: table-cell;

   .container {
    display: table;
    border-collapse:collapse
}
.column {
    display:table-row;
}
.cell {
    display: table-cell;
    border: 1px solid red;
    width: 120px;
    height: 20px;
    -webkit-box-sizing: border-box;
    -moz-box-sizing: border-box;
    box-sizing: border-box;
}

답변

디스플레이 테이블을 사용하는 대신 단순한 음수 여백을 사용하십시오.

fiddle JS Fiddle 에서 업데이트 됨

.container {
    border-style: solid;
    border-color: red;
    border-width: 1px 0 0 1px;
    display: inline-block;
}
.column {
    float: left; overflow: hidden;
}
.cell {
    border: 1px solid red; width: 120px; height: 20px;
    margin:-1px 0 0 -1px;
}
.clearfix {
    clear:both;
}

답변

대신 border사용 box-shadow:

  box-shadow:
    2px 0 0 0 #888,
    0 2px 0 0 #888,
    2px 2px 0 0 #888,   /* Just to fix the corner */
    2px 0 0 0 #888 inset,
    0 2px 0 0 #888 inset;

데모 : http://codepen.io/Hawkun/pen/rsIEp

답변

당신은 당신의 열 display: table-row대신에 사용해야 float: left;하고 분명히 @Hushme가 당신 diaplay: table-cell을 수정해야 합니다.display: table-cell;

 .container {
    display: table;
    border-collapse: collapse;
}
.column {
    display: table-row;
    overflow: hidden;
    width: 120px;
}
.cell {
    display: table-cell;
    border: 1px solid red;
    width: 120px;
    height: 20px;
    -webkit-box-sizing: border-box;
    -moz-box-sizing: border-box;
    box-sizing: border-box;
}

데모

답변

마이너스 여백을 사용할 수도 있습니다.

.column {
  float: left;
  overflow: hidden;
  width: 120px;
}
.cell {
  border: 1px solid red;
  width: 120px;
  height: 20px;
  box-sizing: border-box;
}
.cell:not(:first-child) {
  margin-top: -1px;
}
.column:not(:first-child) > .cell {
  margin-left: -1px;
}
<div class="container">
  <div class="column">
    <div class="cell"></div>
    <div class="cell"></div>
    <div class="cell"></div>
  </div>
  <div class="column">
    <div class="cell"></div>
    <div class="cell"></div>
    <div class="cell"></div>
  </div>
  <div class="column">
    <div class="cell"></div>
    <div class="cell"></div>
    <div class="cell"></div>
  </div>
  <div class="column">
    <div class="cell"></div>
    <div class="cell"></div>
    <div class="cell"></div>
  </div>
  <div class="column">
    <div class="cell"></div>
    <div class="cell"></div>
    <div class="cell"></div>
  </div>
</div>

스 니펫 확장

답변

개요를 사용하지 않는 이유는 무엇입니까? 그것은 당신이 원하는
윤곽선입니다 : 1px 단색 빨강;

답변

border-collapse 사용 예 : 분리; 같이

  • 표로 표시되는 컨테이너 : 

    ol[type="I"]>li{
  display: table;
  border-collapse: separate;
  border-spacing: 1rem;
}