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:
.mycell {
}
.row1 {
}
.row1 .mycell {
}
.row1 .cell1 {
}
.cell1 {
}
.mytable .row1 {
}
.mytable .row1 .mycell {
}
.mytable .row1 .cell1 {
}
.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
더 엄격한 사양이지만 가장 큰 차이를 만드는 검색의 첫 번째 단계이므로 일반적으로 혼란 스러울 가치가 없으며 항상 직접적인 자식인지 여부에 대한 추가 사고 과정, 자식 선택기 >
.)
재 성능 을 빼앗는 요점 은 선택기 의 마지막 항목이 가능한 한 구체적 이어야하고 절대해서는 안된다는 것 *
입니다.