CSS 表格列格式
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/157770/
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
Table Column Formatting
提问by Andy
I'm trying to format a column in a <table/>using a <col/>element. I can set background-color, width, etc., but can't set the font-weight. Why doesn't it work?
我正在尝试<table/>使用<col/>元素格式化 a 中的列。我可以设置background-color,width等，但不能设置font-weight. 为什么不起作用？
<table>
<col style="font-weight:bold; background-color:#CCC;">
<col>
<tr>
<td>1</td>
<td>2</td>
</tr>
<tr>
<td>3</td>
<td>4</td>
</tr>
</table>
回答by Bill
As far as I know, you can only format the following using CSS on the <col>element:
据我所知，您只能在<col>元素上使用 CSS 格式化以下内容：
- background-color
- border
- width
- visibility
- 背景颜色
- 边界
- 宽度
- 能见度
This pagehas more info.
此页面有更多信息。
Herb is right - it's better to style the <td>'s directly. What I do is the following:
Herb 是对的 - 最好<td>直接设置's 的样式。我做的是以下内容：
<style type="text/css">
#mytable tr > td:first-child { color: red;} /* first column */
#mytable tr > td:first-child + td { color: green;} /* second column */
#mytable tr > td:first-child + td + td { color: blue;} /* third column */
</style>
</head>
<body>
<table id="mytable">
<tr>
<td>text 1</td>
<td>text 2</td>
<td>text 3</td>
</tr>
<tr>
<td>text 4</td>
<td>text 5</td>
<td>text 6</td>
</tr>
</table>
This won't work in IE however.
但是，这在 IE 中不起作用。
回答by Herb Caudill
Your best bet is to apply your styling directly to the <td>tags. I've never used the <col>tag, but most browsers let you apply formatting at the <table>and <td>/<th>level, but not at an intermediate level. For example if you have
最好的办法是将样式直接应用于<td>标签。我从未使用过该<col>标签，但大多数浏览器都允许您在<table>和<td>/<th>级别应用格式，但不能在中间级别应用。例如，如果你有
<table>
<tr class="Highlight">
<td>One</td>
<td>Two</td>
</tr>
<tr>
<td>A</td>
<td>B</td>
</tr>
</table>
then this CSS won't work
那么这个 CSS 将不起作用
tr.Highlight { background:yellow }
but this will
但这会
tr.Highlight td { background:yellow }
Also: I assume your code above is just for demonstration purposes and you're not actually going to apply styles inline.
另外：我假设您上面的代码仅用于演示目的，您实际上不会内联应用样式。
回答by Paul
You might have just needed this:
你可能只需要这个：
tr td:first-child label {
font-weight: bold;
}
回答by Herbt
Reading through this as I was attempting to style a table such that the first column would be bold text and the the other four columns would be normal text.
Using col tag seemed like the way to go but while I could set the widths of the columns with the width attribute the font-weight: bold wouldn't work
Thanks for pointing me in the direction of the solution.
By styling all the td elements td {font-weight: bold;}and then using an adjacent sibling selector to select columns 2-5 and style them back to normal td + td {font-weight: normal;}Voila, alls good :)
通读这篇文章时，我试图为表格设置样式，使第一列是粗体文本，而其他四列是普通文本。使用 col 标记似乎是可行的方法，但是虽然我可以使用 width 属性设置列的宽度，但 font-weight: bold 不起作用 感谢您将我指向解决方案的方向。通过设置所有 td 元素的样式td {font-weight: bold;}，然后使用相邻的同级选择器来选择第 2-5 列并将它们的样式设置为正常，td + td {font-weight: normal;}瞧，一切都很好:)
回答by mwilliams
Have you tried applying the style through a CSS class?
您是否尝试过通过 CSS 类应用样式？
The following appears to work:
以下似乎有效：
<style type="text/css">
.xx {
background: yellow;
color: red;
font-weight: bold;
padding: 0 30px;
text-align: right;
}
<table border="1">
<col width="150" />
<col width="50" class="xx" />
<col width="80" />
<thead>
<tr>
<th>1</th>
<th>2</th>
<th>3</th>
<th>4</th>
</tr>
</thead>
<tbody>
<tr>
<td>1</td>
<td>2</td>
<td>3</td>
<td>4</td>
</tr>
</tbody>
</table>
回答by Philip Morton
A coltag must be inside of a colgrouptag, This may be something to do with the problem.
一个col标签必须是内部的colgroup标签，这可能是一些做的问题。
