Html 在 colgroup 中使用文本对齐中心
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/1238115/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me):
StackOverFlow
using text-align center in colgroup
提问by Sander
i have a table in my page, i use colgroups to format all cells in this column the same way, works good for background color and all. but cannot seem to figure out why text-align center does not work. it does not align the text centered.
我的页面中有一个表格，我使用 colgroups 以相同的方式格式化此列中的所有单元格，适用于背景颜色和所有内容。但似乎无法弄清楚为什么 text-align center 不起作用。它不会将文本居中对齐。
example:
例子：
<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> </th>
<th>20</th>
<th>19</th>
<th>18</th>
</thead>
<tbody>
<tr>
<td> </td>
<td> </td>
<td> </td>
<td> </td>
</tr>
</tbody>
</table>
CSS:
CSS：
#names {
width: 200px;
}
#myTable .datacol {
text-align: center;
background-color: red;
}
回答by mercator
Only a limited set of CSS properties applies to columns, and text-alignisn't one of them.
只有一组有限的 CSS 属性适用于 columns，并且text-align不是其中之一。
See "The mystery of why only four properties apply to table columns"for a description of why this is the case.
请参阅“为什么只有四个属性适用于表列的奥秘”以了解为什么会出现这种情况。
In your simple example, the easiest way to fix it would be to add these rules:
在您的简单示例中，修复它的最简单方法是添加以下规则：
#myTable tbody td { text-align: center }
#myTable tbody td:first-child { text-align: left }
That would center all table cells, except the first column. This doesn't work in IE6, but in IE6 the text-aligndoesactually (wrongly) work on the column. I don't know if IE6 supports all properties, or just a larger subset.
这将使所有表格单元格居中，第一列除外。这在 IE6 中text-align不起作用，但在 IE6中确实（错误地）在列上工作。我不知道 IE6 是否支持所有属性，或者只是一个更大的子集。
Oh, and your HTML is invalid. <thead>misses a <tr>.
哦，您的 HTML 无效。<thead>错过了一个<tr>。
回答by DisgruntledGoat
See similar question: Why is styling table columns not allowed?
看到类似的问题：为什么不允许样式表列？
You are only allowed to set border, background, widthand visibilityproperties, due to the fact that cells aren't direct descendents of columns, only of rows.
您只能设置border、background、width和可见性属性，因为单元格不是列的直接后代，而是行的直接后代。
There are a few solutions. The simplest is to add a class to each cell in the column. Unfortunately that means more HTML but shouldn't bee a problem if you're generating tables from a database etc.
有几种解决方案。最简单的方法是为列中的每个单元格添加一个类。不幸的是，这意味着更多的 HTML，但如果您从数据库等生成表格，这应该不是问题。
Another solution for modern browsers (i.e. not IE6) is to use some pseudo classes. tr > td:first-childwill select the first cell in a row. Opera, Safari, Chrome and Firefox 3.5 also support the :nth-child(n)selector so you can target specific columns.
现代浏览器（即不是 IE6）的另一个解决方案是使用一些伪类。tr > td:first-child将选择一行中的第一个单元格。Opera、Safari、Chrome 和 Firefox 3.5 也支持:nth-child(n)选择器，因此您可以定位特定的列。
You could also use td+tdto select from the second column onwards (it actually means "select all tdelements that have one tdelement to its left). td+td+tdselects from the third column - you can continue in this fashion, overriding properties. Honestly though, it's not great code.
您还可以使用td+td从第二列开始选择（它实际上意味着“选择所有td元素，td其左侧有一个元素）。td+td+td从第三列中选择 - 您可以以这种方式继续，覆盖属性。老实说，这不是很好代码。
回答by Fred
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，您可以将一个或多个类附加到 table 元素，以便相应地对齐其列。
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
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/
回答by Jacob C. says Reinstate Monica
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.
除了其他答案中提到的限制之外，截至 2018 年 2 月，由于存在错误，visibility:collapse 仍然不适用于基于 Chrome 和 Chromium 的浏览器中的 colgroup。请参阅“ CSS col 可见性：折叠在 Chrome 上不起作用”。所以我相信当前可用的属性只是边框、背景、宽度（除非你为 Chrome 和其他基于 Chromium 的浏览器使用了某种 polyfill）。可以在https://crbug.com/174167上跟踪该错误。
