표 머리글의 텍스트 정렬

표 머리글의 텍스트 정렬

---

th 요소에서 align작동하지 않는 것 같습니다 . 내 HTML은 다음과 같습니다.

<div style="width: 100%; height: 175px; overflow: auto;">
  <table class="grid" id="table">
    <thead>
      <tr>
        <th class="not_mapped_style" style="display: none;" align="center">id</th>
        <th class="not_mapped_style" align="center">DisplayName</th>
        <th align="center">PrimaryEmail</th>
        <th align="center">Age</th>
        <th align="center">Phone</th>
      </tr>
    </thead>
    <caption>Contacts</caption>
    <tbody>
      <tr>
        <td style="display: none;" property_value="0" property_name="id" align="center">0</td>
        <td property_value="rpcuser" property_name="DisplayName" align="center">rpcuser</td>
        <td property_value="admin@domain.com" property_name="PrimaryEmail" align="center">admin@domain.com</td>
        <td property_value="69" property_name="Age" align="center">69</td>
        <td property_value="+722616807" property_name="Hand_Phone" align="center">+18007</td>
      </tr>
    </tbody>
  </table>
</div>

텍스트 정렬은 td요소에 대해 잘 작동 하지만 th. 왜?

---

시험:

text-align: center;

HTML 정렬 속성 (HTML 5에서 중단됨)에 익숙 할 수 있습니다. align 속성은 다음과 같은 태그와 함께 사용할 수 있습니다.

<table>, <td>, and <img> 

이러한 요소의 정렬을 지정합니다. 이 속성을 사용하면 요소를 가로로 정렬 할 수 있습니다. HTML에는 요소를 수직으로 정렬하기위한 valign 속성도 있습니다. 이것은 또한 HTML5에서 중단되었습니다.

이러한 속성은 HTML 요소의 정렬을 설정하기 위해 CSS를 사용하기 위해 중단되었습니다.

실제로 CSS align 또는 CSS valign 속성이 없습니다. 대신 CSS에는 블록 수준 요소의 인라인 콘텐츠에 적용되는 text-align과 인라인 수준 및 테이블 셀에 적용되는 vertical-align 속성이 있습니다.

---

스타일을 사용 해보세요

th {text-align:center}

---

스타일 속성에서 텍스트 정렬을 사용하여 가운데 정렬하십시오.

<th class="not_mapped_style" style="text-align:center">DisplayName</th>

---

모든 테이블을 중앙에 배치하려면 :
table th{ text-align: center; }

결정된 ID가있는 테이블의 중심 만 맞추려면 다음을 수행하십시오.
table#tableId th{ text-align: center; }

---

에서 HTML5 , 가장 쉽고, 빠르게, 방법 당신의 중앙에 <th>THcontent</th>을 추가하는 것입니다 colspan같이 :

<th colspan="3">Thcontent</th> 

테이블이 세 개의 열인 경우 작동합니다. 따라서 4 열 테이블이있는 경우 4를 추가합니다 colspan.

colspan내가 말한 것처럼 HTML에 넣는 동안 CSS 파일에서 위치를 더 관리 할 수 ​​있습니다 .

th { 
    text-align: center; /* Or right or left */
}

---

HTML :

<tr>
    <th>Language</th>
    <th>Skill Level</th>
    <th>&nbsp;</th>
</tr>

CSS :

tr, th {
    padding: 10px;
    text-align: center;
}

---

Your code works, but it uses deprecated methods to do so. You should use the CSS text-align property to do this rather than the align property. Even so, it must be your browser or something else affecting it. Try this demo in Chrome (I had to disable normalize.css to get it to render).

• Source: http://jsfiddle.net/EDSWL/
• Demo: http://jsfiddle.net/EDSWL/show

---

For me none of the above worked. I think it is because I have two levels of header and a fixed width on level 1. So I couldn't align the text inside the corresponding columns on level 2.

+---------------------------+
|           lvl 1           |
+---------------------------+
| lvl 2 col a | lvl 2 col b |
+---------------------------+

I had to use the combination of width:auto and text:align-center :

<th style="width:auto;text-align:center">lvl 2 col a</th>
<th style="width:auto;text-align:center">lvl 2 col b</th>

ReferenceURL : https://stackoverflow.com/questions/13992096/align-text-in-a-table-header