在colgroup中使用文本對齊中心

我在我的頁面中有一個表格，我使用colgroups以同樣的方式格式化此列中的所有單元格，適用於背景顏色和所有單元格。但似乎無法弄清楚爲什麼文本對齊中心不起作用。它不會對齊文本居中。在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; 
}

來源

2009-08-06 Sander

105

只有a limited set of CSS properties applies to columns和text-align是不是其中之一。

請參閱"The mystery of why only four properties apply to table columns"瞭解爲什麼會出現這種情況。

在您簡單的例子，來修復它會添加這些規則最簡單的方法：

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

這將中心的所有表格單元格中，除第一列。這在IE6中不起作用，但在IE6中text-align確實實際上（錯誤地）在列上工作。我不知道IE6是否支持所有屬性，或只是一個更大的子集。

哦，你的HTML無效。 <thead>未命中<tr>。

來源

2009-08-06 10:43:56 mercator

所以你說這是不可能的，他唯一的方法來實現這一點將是在TD元素本身然後 – Sander 2009-08-06 12:02:10

是的。我已經爲您的示例添加了一個修復程序，但如果表格變得更復雜，那麼這不起作用。 DisgruntledGoat提供了一些更多的解決方案。 – mercator 2009-08-06 13:07:38

這兩個關於內部失蹤tr的建議也是無效的。 th不屬於tbody，td不屬於thead。只需添加一個tr來包含th的內部thead。 – graywh 2010-11-12 15:18:36

見類似的問題：Why is styling table columns not allowed?

你只能設置邊境，背景，寬度和知名度性質，由於這樣的事實，細胞不是列的直接後裔，只有行。

有幾個解決方案。最簡單的方法是向列中的每個單元添加一個類。不幸的是，這意味着更多的HTML，但不應該成爲一個問題，如果你從數據庫中產生表等。

現代瀏覽器（即不是IE6）的另一種解決方案是使用一些僞類。 tr > td:first-child將選擇連續的第一個單元格。 Opera，Safari，Chrome和Firefox 3.5也支持:nth-child(n)選擇器，因此您可以定位特定列。

你也可以使用td+td從第二欄開始選擇（它實際上是指「選擇具有一個td元素，其左側的所有td元素）td+td+td從第三列選擇 - 你可以繼續以這種方式，覆蓋雖然它並不是很好的代碼

來源

2009-08-06 11:11:55 DisgruntledGoat

通過以下CSS，您可以將一個或多個類附加到表元素，以便相應地對齊其列。

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>

例子：http://jsfiddle.net/HHZsw/

來源

2013-08-14 12:56:40 Fred

真實，儘管很小的評論：這些選擇器是CSS3選擇器，可用於IE9及更高版本。如果您需要支持較低版本的IE，則不能使用此方法。 – Sander 2013-08-14 13:02:25

除了其他的答案中提到，截至2月2018的限制，能見度：崩潰仍然無法正常工作的Chrome和Chrome瀏覽器中的colgroups，由於bug。請參閱「CSS col visibility:collapse does not work on Chrome」。所以我相信當前可用的屬性只是邊框，背景，寬度（除非您爲Chrome和其他基於Chromium的瀏覽器使用某種polyfill）。該錯誤可以在https://crbug.com/174167進行跟蹤。

來源

2018-02-22 23:13:23

在colgroup中使用文本對齊中心

回答

相關問題