[css] CSS“display : table-column”은 어떻게 작동해야합니까?

Program / 글쓴이

다음 HTML과 CSS를 감안할 때 브라우저에 아무것도 표시되지 않습니다 (작성 당시 최신 Chrome 및 IE). 모든 것이 0x0 px로 축소됩니다. 왜?

<!DOCTYPE html>
<html>
<head>
    <style type="text/css">
        section { display: table; height: 100%; background-color: grey; }

        #colLeft { display: table-column; height: 100%; background-color: green; }
        #colRight { display: table-column; height: 100%; background-color: red; }

        #row1 { display: table-row; height: 100%; }
        #row2 { display: table-row; height: 100%; }
        #row3 { display: table-row; height: 100%; }

        #cell1 { display: table-cell; height: 100%; }
        #cell2 { display: table-cell; height: 100%; }
        #cell3 { display: table-cell; height: 100%; }
    </style>
</head>
<body>
    <section>
        <div id="colLeft">
            <div id="row1">
                <div id="cell1">
                    AAA
                </div>
            </div>
            <div id="row2">
                <div id="cell2">
                    BBB
                </div>
            </div>
        </div>
        <div id="colRight">
            <div id="row3">
                <div id="cell3">
                    CCC
                </div>
            </div>
        </div>
    </section>
</body>
</html>

답변

CSS 테이블 모델은 HTML 테이블 모델 http://www.w3.org/TR/CSS21/tables.html을 기반으로합니다
.

테이블은 ROWS로 나뉘고 각 행에는 하나 이상의 셀이 포함됩니다. 셀은 ROWS의 자식이며 열의 자식이 아닙니다.

“display : table-column”은 열 레이아웃을 만드는 메커니즘을 제공하지 않습니다 (예 : 콘텐츠가 한 열에서 다음 열로 이동할 수있는 여러 열이있는 신문 페이지).

오히려 “table-column”은 테이블 행 내의 해당 셀에 적용되는 속성 만 설정합니다. 예를 들어 “각 행의 첫 번째 셀의 배경색이 녹색”이라고 설명 할 수 있습니다.

테이블 자체는 항상 HTML에서와 동일한 방식으로 구성됩니다.

HTML에서 ( “td”는 “col”내부가 아니라 “tr”내부에 있음) :

<table ..>
  <col .. />
  <col .. />
  <tr ..>
    <td ..></td>
    <td ..></td>
  </tr>
  <tr ..>
    <td ..></td>
    <td ..></td>
  </tr>
</table>

CSS 테이블 속성을 사용하는 해당 HTML ( “column”div에는 내용이 포함되어 있지 않습니다. 표준은 열에 직접 내용을 허용하지 않습니다) :

.mytable {
  display: table;
}
.myrow {
  display: table-row;
}
.mycell {
  display: table-cell;
}
.column1 {
  display: table-column;
  background-color: green;
}
.column2 {
  display: table-column;
}
<div class="mytable">
  <div class="column1"></div>
  <div class="column2"></div>
  <div class="myrow">
    <div class="mycell">contents of first cell in row 1</div>
    <div class="mycell">contents of second cell in row 1</div>
  </div>
  <div class="myrow">
    <div class="mycell">contents of first cell in row 2</div>
    <div class="mycell">contents of second cell in row 2</div>
  </div>
</div>

스 니펫 확장

선택 사항 : 다음과 같이 각 행과 셀에 여러 클래스를 할당하여 “행”과 “열”모두 스타일을 지정할 수 있습니다. 이 접근 방식은 스타일을 지정할 다양한 셀 세트 또는 개별 셀을 지정할 때 최대한의 유연성을 제공합니다.

//Useful css declarations, depending on what you want to affect, include:

/* all cells (that have "class=mycell") */
.mycell {
}

/* class row1, wherever it is used */
.row1 {
}

/* all the cells of row1 (if you've put "class=mycell" on each cell) */
.row1 .mycell {
}

/* cell1 of row1 */
.row1 .cell1 {
}

/* cell1 of all rows */
.cell1 {
}

/* row1 inside class mytable (so can have different tables with different styles) */
.mytable .row1 {
}

/* all the cells of row1 of a mytable */
.mytable .row1 .mycell {
}

/* cell1 of row1 of a mytable */
.mytable .row1 .cell1 {
}

/* cell1 of all rows of a mytable */
.mytable .cell1 {
}
<div class="mytable">
  <div class="column1"></div>
  <div class="column2"></div>
  <div class="myrow row1">
    <div class="mycell cell1">contents of first cell in row 1</div>
    <div class="mycell cell2">contents of second cell in row 1</div>
  </div>
  <div class="myrow row2">
    <div class="mycell cell1">contents of first cell in row 2</div>
    <div class="mycell cell2">contents of second cell in row 2</div>
  </div>
</div>

스 니펫 확장

사용 오늘날의 유연한 설계에서 <div>여러 목적을 위해, 그것을 넣어하는 것이 현명하다 일부 그것을 참조하기 위해, 각 사업부에 클래스를. 여기, 무엇을 해야하는 데 사용 <tr>되는 HTML에서 것은되었다 class myrow, 그리고 <td>되었다 class mycell. 이 규칙은 위의 CSS 선택자를 유용하게 만드는 것입니다.

성능 참고 : 각 셀에 클래스 이름을 넣고 위의 다중 클래스 선택기를 사용하는 것이 또는 짝수 *와 같이로 끝나는 선택자를 사용하는 것보다 성능이 좋습니다 . 그 이유는 셀렉터가 일치한다는 것이다 마지막 제 매칭 요소가 모색되고 그렇게되면 제 수행 일치하는 모든 다음 요소를 체크 각 요소의 모든 선조 모든 조상이 있는지 찾기 위해 . 느린 장치의 복잡한 문서에서는 속도가 느릴 수 있습니다. 직계 부모 만 검사하기 때문에 더 좋습니다. 그러나을 통해 대부분의 요소를 즉시 제거하는 것이 훨씬 낫습니다 . (.row1 *.row1 > *.row1 **class row1.row1 > *.row1 .cell1.row1 > .cell1더 엄격한 사양이지만 가장 큰 차이를 만드는 검색의 첫 번째 단계이므로 일반적으로 혼란 스러울 가치가 없으며 항상 직접적인 자식인지 여부에 대한 추가 사고 과정, 자식 선택기 >.)

재 성능 을 빼앗는 요점 은 선택기 의 마지막 항목이 가능한 한 구체적 이어야하고 절대해서는 안된다는 것 *입니다.

답변

“table-column”디스플레이 유형은 <col>HTML 의 태그 처럼 작동 함을 의미합니다. 즉 너비 *가 둘러싸는 테이블의 해당 물리적 ​​열의 너비를 제어하는 ​​보이지 않는 요소입니다.

참조 W3C의 표준을 하는 CSS 테이블 모델에 대한 자세한 내용은.

* 그리고 테두리, 배경과 같은 몇 가지 다른 속성.

답변