colgroup에서 텍스트 정렬 센터 사용

colgroup에서 텍스트 정렬 센터 사용

---

내 페이지에 표가 있고 colgroup을 사용 하여이 열의 모든 셀을 동일한 방식으로 서식을 지정하고 배경색 및 모두에 적합합니다. 그러나 텍스트 정렬 센터가 작동하지 않는 이유를 파악할 수 없습니다. 텍스트를 가운데로 정렬하지 않습니다.

예:

<table id="myTable" cellspacing="5">
    <colgroup id="names"></colgroup>
    <colgroup id="col20" class="datacol"></colgroup>
    <colgroup id="col19" class="datacol"></colgroup>
    <colgroup id="col18" class="datacol"></colgroup>

    <thead>
        <th>&nbsp;</th>
        <th>20</th>
        <th>19</th>
        <th>18</th>
    </thead>
    <tbody>
        <tr>
            <td>&nbsp;</td>
            <td>&nbsp;</td>
            <td>&nbsp;</td>
            <td>&nbsp;</td>
        </tr>
    </tbody>
</table>

CSS :

#names {
    width: 200px;
}

#myTable .datacol {
    text-align: center;
    background-color: red;
}

---

만 CSS 속성의 제한된는 컬럼에 적용 하고, text-align그 중 하나가 아닙니다.

이 경우에 대한 설명은 "테이블 열에 4 개의 속성 만 적용되는 이유에 대한 미스터리"를 참조하십시오 .

간단한 예에서이를 수정하는 가장 쉬운 방법은 다음 규칙을 추가하는 것입니다.

#myTable tbody td { text-align: center }
#myTable tbody td:first-child { text-align: left }

첫 번째 열을 제외한 모든 테이블 셀을 중앙에 배치합니다. 이것은 IE6에서는 작동하지 않지만 IE6 text-align 에서는 실제로 (잘못) 열에서 작동합니다. IE6가 모든 속성을 지원하는지 아니면 더 큰 하위 집합 만 지원하는지 모르겠습니다.

아, 그리고 귀하의 HTML이 유효하지 않습니다. <thead>그리워 <tr>.

---

유사한 질문을 참조하십시오. 테이블 열 스타일 지정이 허용되지 않는 이유는 무엇입니까?

셀이 열의 직계 하위 항목이 아니라 행의 직계 하위 항목이기 때문에 border , background , width 및 표시 속성 만 설정할 수 있습니다.

몇 가지 해결책이 있습니다. 가장 간단한 방법은 열의 각 셀에 클래스를 추가하는 것입니다. 불행히도 이는 더 많은 HTML을 의미하지만 데이터베이스 등에서 테이블을 생성하는 경우 문제가되지 않습니다.

최신 브라우저 (즉, IE6가 아님)를위한 또 다른 솔루션은 일부 의사 클래스를 사용하는 것입니다. tr > td:first-child행의 첫 번째 셀을 선택합니다. Opera, Safari, Chrome 및 Firefox 3.5도 :nth-child(n)선택기를 지원 하므로 특정 열을 타겟팅 할 수 있습니다.

을 (를) 사용 td+td하여 두 번째 열부터 선택할 수도 있습니다 (실제로는 " 왼쪽에 td하나의 요소가있는 모든 요소를 선택 함을 의미합니다 td). td+td+td세 번째 열에서 선택합니다 . 이 방식으로 계속해서 속성을 재정의 할 수 있습니다. 솔직히 좋지는 않습니다. 암호.

---

With the following CSS, you can just append one or more classes to the the table element in order to align its columns accordingly.

CSS

.col1-right td:nth-child(1) {text-align: right}
.col2-right td:nth-child(2) {text-align: right}
.col3-right td:nth-child(3) {text-align: right}

HTML

<table class="col2-right col3-right">
  <tr>
    <td>Column 1 will be left</td>
    <td>Column 2 will be right</td>
    <td>Column 2 will be right</td>
  </tr>
</table>

Example: http://jsfiddle.net/HHZsw/

---

In addition to the limitations mentioned in other answers, as of February 2018, visibility:collapse still does not work on colgroups in Chrome and Chromium based browsers, due to a bug. See "CSS col visibility:collapse does not work on Chrome". So I believe the currently usable properties are just border, background, width (unless you employ some sort of polyfill for Chrome and other Chromium-based browsers). The bug can be tracked at https://crbug.com/174167 .

참고URL : https://stackoverflow.com/questions/1238115/using-text-align-center-in-colgroup