하나의 테이블 행을 가운데로 정렬하고 다른 테이블 행을 맨 위에 정렬하는 데 필요한 최소 코드는 무엇입니까?

Question

테이블이 있습니다. 3 행으로 가정 해 봅시다. 처음 두 개가 위쪽으로 세로로 정렬되고 두 번째 세로가 가운데로 세로로 정렬되기를 원합니다.

나는 정의하려고하면 :

td {vertical-align:top} 
tr.middle {vertical-align:middle} 

과 HTML에서

, 그것은 TD 정의는 지속 것처럼 작동하지 않습니다 관련 <tr>- class="middle", 을 할당합니다. 내가 관리했습니다 유일한 방법은

는

td.top {vertical-align:top} 
td.middle {vertical-align:middle} 

을 정의하고 너무 많은 코드 매 TD에 해당 클래스를 할당하는 것입니다.

최소 코드로이를 수행하는 방법은 무엇입니까? 때문에 계단식의 계단식 자연

tr.top { 
    vertical-align: top; 
} 

: http://jsfiddle.net/sqhxqdck/

내가 질문을 오해하고있어하지 않는 한, 모두가 정말로 필요가있다 :

Answer 1

단순히 이렇게하면 HTML을 편집하거나 클래스를 추가 할 필요가 없습니다.

tr:nth-child(1) td {vertical-align:top;} 
tr:nth-child(2) td {vertical-align:middle;} 
tr:nth-child(3) td {vertical-align:bottom;} 

데모http://jsfiddle.net/v68ao3pv/1

는 IE8 지원이 필요한 경우 : 현재 CSS를 사용

tr:first-child td   {vertical-align:top;} 
tr:first-child + tr td  {vertical-align:middle;} 
tr:first-child + tr + tr td {vertical-align:bottom;} 

데모http://jsfiddle.net/v68ao3pv/2/show

Answer 2

이 바이올린보다 훨씬 많은 최소를 얻을하지 않습니다 스타일 시트.

Answer 3

예, 방법이 있습니다. 하위 선택기를 사용할 수 있습니다. 그 말은, 첫 번째 TR과 두 번째로 클래스 "중간"에 클래스 "최고"를 할당하고 CSS에 쓰기 :

.top td{vertical-align:top} 
.middle td{vertical-align: middle} 
//  ↑ 
// THIS space is important. 

은 그래서 상단/중간 인 요소 내의 모든 테이블 셀을 선택

수업. 이것은 당신이 꽤 자주 사용할 수있는 매우 실용적인 것입니다. website of the W3 Consortium에있는 CSS 선택기에 대해 자세히 알아보십시오.

Answer 4

을의 .middle 규칙 선택이보다 구체적인합니다를 이 경우

td {vertical-align:top} 
tr.middle td {vertical-align:middle} 

모든 td 기본적으로 상부 및 중간에 정렬하도록 .middle 행의 모든 ​​셀을 강제로 더 특정 선택에 정렬된다.