將表格中的某一列居中

Question

我想將表格中的某些列居中但我遇到了問題。我知道在過去你只是簡單地將內聯樣式應用到每個TD上，但必須有更好的方法。

下面是一個簡單的例子：

.centerText{ 
 
\t text-align:center; 
 
}

<table border="1"> 
 
     <col> 
 
     <col class="centerText"> 
 
     <thead> 
 
     <tr> 
 
      <th>heading1</th> 
 
      <th>heading2</th> 
 
     </tr> 
 
     </thead> 
 
     <tbody> 
 
     <tr> 
 
      <td>1</td> 
 
      <td>2</td> 
 
     </tr> 
 
     <tr> 
 
      <td>3</td> 
 
      <td>4</td> 
 
     </tr> 
 
     <tr> 
 
      <td>5</td> 
 
      <td>6</td> 
 
     </tr> 
 
     <tr> 
 
      <td>7</td> 
 
      <td>8</td> 
 
     </tr> 
 
     </tbody> 
 
    </table>

與該類我試圖中心內部的文本。我知道將css應用於列將適用於更改列和文本顏色等的背景顏色，但我不知道如何使用它來居中列。我假設，因爲我需要集中td的內容，這可能只是TD元素本身的集中;這已經是100％了。 我知道我可以說在這個TR中將CSS應用於第5個TD，但看起來很脆弱。

此外，如果您可以告訴我如何以這種方式更改列的寬度，則可獲得額外獎勵。我用山坳width屬性但在HTML 5（儘管它仍然是目前支持已過時。

Answer 1

CSS

table { 
    border-collapse: collapse; 
    width: 100%; 
} 

td { 
    text-align: center 
} 

Answer 2

做，你的類沒有任何地方使用

tr td:nth-child(2) { 
 
\t text-align:center; 
 
}

<table border="1"> 
 
    <thead> 
 
    <tr> 
 
     <th>heading1</th> 
 
     <th>heading2</th> 
 
    </tr> 
 
    </thead> 
 
    <tbody> 
 
    <tr> 
 
     <td>1</td> 
 
     <td >2</td> 
 
    </tr> 
 
    <tr> 
 
     <td>3</td> 
 
     <td>4</td> 
 
    </tr> 
 
    <tr> 
 
     <td>5</td> 
 
     <td>6</td> 
 
    </tr> 
 
    <tr> 
 
     <td>7</td> 
 
     <td>8</td> 
 
    </tr> 
 
    </tbody> 
 
</table>

我刪除：

<col> 
    <col class="centerText"> 

和

.centerText{ 
    text-align:center; 
} 

因爲山坳並不意味着什麼，你沒有關閉標籤。

Answer 3

如果你想你的所有TD的內容對齊到中心

的centerText類添加到您的表

<table class="centerText" border="1"> 

Answer 4

這不是完全清楚你想要什麼，但如果你想中心內容您可以使用此CSS規則：

td:nth-child(2) { 
    text-align:center; 
} 

在此示例中它適用於第二列，但您可以爲任何列定義該列。它的工作原理是td始終是tr的子項，因此您可以使用nth-child選擇器。

td:nth-child(2) { 
 
    text-align: center; 
 
}

<table border="1"> 
 
    <col> 
 
    <col class="centerText"> 
 
    <thead> 
 
    <tr> 
 
     <th>heading1</th> 
 
     <th>heading2</th> 
 
    </tr> 
 
    </thead> 
 
    <tbody> 
 
    <tr> 
 
     <td>1</td> 
 
     <td>2</td> 
 
    </tr> 
 
    <tr> 
 
     <td>3</td> 
 
     <td>4</td> 
 
    </tr> 
 
    <tr> 
 
     <td>5</td> 
 
     <td>6</td> 
 
    </tr> 
 
    <tr> 
 
     <td>7</td> 
 
     <td>8</td> 
 
    </tr> 
 
    </tbody> 
 
</table>