테이블의 전체 열의 텍스트 정렬을 설정하는 방법이 있습니까?

Question

두 번째 열의 모든 셀에 대한 텍스트 정렬을 right으로 설정하는 간단한 방법이 있습니까?

또는 열의 각 셀에 대한 맞춤을 설정하는 유일한 방법은 무엇입니까?

은 (불행하게도, col 태그의 align 속성은 파이어 폭스에서 지원되지 않습니다.)

Answer 1

은 2 열의 모든 셀에 클래스를 추가합니다.

.second { 
    text-align: right; 
} 

CSS3을 사용할 수도 있습니다. 작동 번째 열에있는 행의 모든 ​​셀 또는 셀에 대한 클래스를 추가

tr td:nth-child(2) { /* I don't think they are 0 based */ 
    text-align: right; 
} 

(그것은 = < IE8에서 작동하지 않을 것이다)

Answer 2

.

.second { 
    text-align: right; 
} 

또는

추가 클래스는 그럴 필요와 스타일 시트에 다음 CSS를 추가 할 수 있습니다.

tr.second { 
    text-align: right; 
} 

Answer 3

나는 다음과 같은 작업 및 클래스와 각 행의 두 번째 셀을 주석을 필요로하지 않을 것이라고 생각합니다.

td:first-child + td { text-align: right; } 

이 규칙은 부모의 첫 번째 자식 인 td 바로 다음에 td를 선택합니다. 일반적인 표에서는 각 행의 두 번째 셀을 선택합니다.

Answer 4

조금 늦었지만이 문제는 나 자신도 그렇게 생각하여 해결할 것이라고 생각했습니다. 이 대답은 LESS을 사용하는 경우에만 적용된다는 점에 유의할 가치가 있습니다.

// Loop for @i until @i = @n 
// Much like - for($i=0; $i<=$n; $i++) 
// 
.table-cols(@n, @i: 1) when (@i =< @n) 
{ 
    .table-center-col-@{i} 
    { 
     tr > td:nth-child(@{i}) 
     { 
      text-align: center; 
     } 
    } 

    .table-right-col-@{i} 
    { 
     tr > td:nth-child(@{i}) 
     { 
      text-align: right; 
     } 
    } 

    // Continue the iteration 
    .table-cols(@n, (@i + 1)); 
} 

.table-cols(16); 

이의 부하를 생성합니다 : 대신 수동으로 당신이 당신의 테이블에 적용 할 수있는 클래스의 범위를 만들 수는 LESS에서 루프를 사용할 수있는 각 셀에 클래스 또는 스타일을 추가해야하는

.table-center-col-1과 같은 클래스는 .table-center-col-16까지 (이 예제에서) 적용 가능한 열의 텍스트를 가운데에 배치합니다. .table-right-col-n으로 오른쪽 맞춤 텍스트에 대해서도 동일한 작업을 수행합니다.

테이블에서 가질 수있는 최대 칼럼의 너비를 커버하기 위해 16에서 제공되는 수를 조정할 수 있습니다. 가변 열 번호의 경우 이것은별로 도움이되지 않습니다.

4 열의 셀의

<table class="table-center-col-4"> 
    <thead> 
     <tr> 
      <td>Column 1</td> 
      <td>Column 2</td> 
      <td>Column 3</td> 
      <td>Column 4</td> 
      <td>Column 5</td> 
     </tr> 
    </thead> 
    <tbody> 
     <tr> 
      <td>x</td> 
      <td>x</td> 
      <td>x</td> 
      <td>x</td> 
      <td>x</td> 
     </tr> 
    </tbody> 
</table> 

모든 이제 중심으로 한 것입니다 텍스트 :

그런 다음 당신이해야 할 모든 테이블에 적용됩니다.

Answer 5

특히 우아한 아니지만, 내 사이트 전체의 CSS 파일이 뭔가를 던져 좋아 :

.tr1 td:nth-child(1), .tr1 th:nth-child(1), 
.tr2 td:nth-child(2), .tr2 th:nth-child(2), 
.tr3 td:nth-child(3), .tr3 th:nth-child(3), 
.tr4 td:nth-child(4), .tr4 th:nth-child(4), 
.tr5 td:nth-child(5), .tr5 th:nth-child(5), 
.tr6 td:nth-child(6), .tr6 th:nth-child(6), 
.tr7 td:nth-child(7), .tr7 th:nth-child(7), 
.tr8 td:nth-child(8), .tr8 th:nth-child(8), 
.tr9 td:nth-child(9), .tr9 th:nth-child(9) { text-align:right } 

.tc1 td:nth-child(1), .tc1 th:nth-child(1), 
.tc2 td:nth-child(2), .tc2 th:nth-child(2), 
.tc3 td:nth-child(3), .tc3 th:nth-child(3), 
.tc4 td:nth-child(4), .tc4 th:nth-child(4), 
.tc5 td:nth-child(5), .tc5 th:nth-child(5), 
.tc6 td:nth-child(6), .tc6 th:nth-child(6), 
.tc7 td:nth-child(7), .tc7 th:nth-child(7), 
.tc8 td:nth-child(8), .tc8 th:nth-child(8), 
.tc9 td:nth-child(9), .tc9 th:nth-child(9) { text-align:center } 

당신이 열이 원하는 경우, 중앙 또는 오른쪽 정렬, 즉하고자하는 열 번호 그럼 그냥 지정 CSS의 슈퍼 우아한 아니지만

<table class="tr2 tc3 tr7"> 

, 대안도 덜 우아한 : & 7 우측 정렬, 3은 수행을 중심으로 각 테이블에 대해 사용자 정의 클래스를 즉, 또는이 각 tr을 필요로하는 class="ralign" 또는 유사품.

Doesn't work with IE8