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


87

다음 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>

답변:


118

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더 엄격한 사양이지만 가장 큰 차이를 만드는 검색의 첫 번째 단계이므로 일반적으로 혼란 스러울 가치가 없으며 항상 직접적인 자식인지 여부에 대한 추가 사고 과정, 자식 선택기 >.)

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


나는 이것을 직접 시도하지 않았지만 IE6 및 IE7에 대한 자바 스크립트 솔루션 인 tanalin.com/en/projects/display-table-htc에 대한 권장 사항을 보았습니다 . 자바 스크립트가 실행되면 페이지를 이전 HTML 테이블 태그로 변환합니다.
ToolmakerSteve

솔루션은 IE8 +, Firefox, Chrome, iPad, Android에서 작동합니다. 테이블의 유연한 구조가 필요하고 위에 나열된 최신 브라우저를 지원하는 경우 테이블 레이아웃을 피하는 좋은 방법입니다.
mbokil 2013-07-26

<col style="color: red;" >일이 아니라,이 <col style="background-color: red;" >괜찮습니다! 이것에 무슨 문제가 있습니까?
xgqfrms

@xgqfrms : 다른 CSS 규칙이 색상을 재정의해야합니다. 아마도 셀 내부의 요소에 적용된 규칙 일 것입니다. 예를 들어, 텍스트가 <p> 안에 있으면 더 구체적인 규칙 설정 <p> 색상이있는 곳입니다. 시도해보십시오 <col style="color: red !important;">. 이것이 작동한다면 그것이 문제입니다. 그러나 과도하게 사용하는 습관을 들이지 마십시오 !important. 해당 작업을 확인한 후 제거하고 우선 순위를 지정할보다 구체적인 선택기를 찾는 것이 가장 좋습니다. google "css more specific selector"또는 smashingmagazine.com/2007/07/…
ToolmakerSteve

23

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

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

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


2
는 IF col요소가 수행하는 논리 구조를 가지고, 다음 방법 중 하나는 CSS 규칙을 사용하여 정당화 않습니다 display: table-column;만 표현 적 구조를 가지고있다? display( w3.org/wiki/CSS/Properties/display ) 의 사양에 따르면 col요소 처럼 "동작"해야합니다 . 그러나 나는 그 유용 ... 얼마나 볼 수 없습니다
chharvey가

1
@ TestSubject528491 그러면 [프레젠테이션] 테이블의 열 배경, 열 너비 등을 설정할 수 있기 때문입니다. 그러나 실제로는 <col>태그 자체에 대한 기본 스타일 규칙을 지정 하거나 다른 XML 기반 마크 업 언어의 동등한 태그 를 지정하는 측면에서 가장 유용 합니다.
Random832

@chharvey : HTML col프레젠테이션 스타일 포함 하는 논리적 요소입니다 . 정보 열을 넣을 수 없습니다. 이것은 일반적인 오해입니다. 테이블 데이터는 항상 행에 있습니다. 논리 요소 (일반적으로 a )를 . 이 요소에 할당 된 다른 스타일 필드가 프레젠테이션 개념 "열"에 적용됩니다. 결과는 표시되지 않고 내용이있는 경우 무시되는 논리적 요소입니다. 유일한 효과는 연관된 프리젠 테이션의 "열"에 스타일을 적용하는 것입니다. 템플릿에 대한 내 대답을 참조하십시오. display: table-column;divcol
ToolmakerSteve
당사 사이트를 사용함과 동시에 당사의 쿠키 정책개인정보 보호정책을 읽고 이해하였음을 인정하는 것으로 간주합니다.
Licensed under cc by-sa 3.0 with attribution required.