CSS "display : table-column"은 어떻게 작동해야합니까?
다음 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>In today's flexible designs, which use <div> for multiple purposes, it is wise to put some class on each div, to help refer to it. Here, what used to be <tr> in HTML became class myrow, and <td> became class mycell. This convention is what makes the above CSS selectors useful.
PERFORMANCE NOTE: putting class names on each cell, and using the above multi-class selectors, is better performance than using selectors ending with *, such as .row1 * or even .row1 > *. The reason is that selectors are matched last first, so when matching elements are being sought, .row1 * first does *, which matches all elements, and then checks all the ancestors of each element, to find if any ancestor has class row1. This might be slow in a complex document on a slow device. .row1 > * is better, because only the immediate parent is examined. But it is much better still to immediately eliminate most elements, via .row1 .cell1. (.row1 > .cell1 is an even tighter spec, but it is the first step of the search that makes the biggest difference, so it usually isn't worth the clutter, and the extra thought process as to whether it will always be a direct child, of adding the child selector >.)
The key point to take away re performance is that the last item in a selector should be as specific as possible, and should never be *.
The "table-column" display type means it acts like the <col> tag in HTML - i.e. an invisible element whose width* governs the width of the corresponding physical column of the enclosing table.
See the W3C standard for more information about the CSS table model.
* And a few other properties like borders, backgrounds.
참고URL : https://stackoverflow.com/questions/7617418/how-is-a-css-display-table-column-supposed-to-work
'your programing' 카테고리의 다른 글
| 생성자가 값을 반환하지 않는 이유는 무엇입니까? (0) | 2020.10.12 |
|---|---|
| ld를 금으로 대체-경험이 있습니까? (0) | 2020.10.12 |
| @see와 @inheritDoc의 차이점에 대한 세부 정보 (0) | 2020.10.12 |
| 각도를 사용하여 브라우저 뒤로 버튼 클릭 이벤트를 감지하는 방법은 무엇입니까? (0) | 2020.10.12 |
| 스트림을 사용하여 커스텀 비교기로 TreeSet으로 수집 (0) | 2020.10.12 |