表列格式
时间：2020-03-06 14:58:38 来源:igfitidea点击:
我正在尝试使用<col />元素格式化<table />中的列。我可以设置"背景颜色"，"宽度"等，但是不能设置"字体粗细"。为什么不起作用？
<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>
解决方案
一个col标签必须在一个colgroup标签内，这可能与问题有关。
我们是否尝试过通过CSS类应用样式？
以下内容似乎起作用：
<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>
col元素的参考
最好的选择是直接将样式应用于<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>
那么这个CSS将无法正常工作
tr.Highlight { background:yellow }
但这会
tr.Highlight td { background:yellow }
另外：我假设我们上面的代码仅用于演示目的，并且我们实际上不会内联应用样式。
据我所知，我们只能在CSS <col>元素上使用CSS格式化以下内容：
- 背景颜色
- 边界
- 宽度
- 能见度
此页面有更多信息。
Herb是对的，最好直接设置<td>的样式。我要做的是以下几点：
<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>
但是，这在IE中不起作用。
在尝试为表格设置样式时通读了此内容，以使第一列为粗体文本，而其他四列为普通文本。
使用col标记似乎是可行的方法，但是虽然我可以使用width属性设置列的宽度，但是font-weight：bold却不起作用
感谢我们向我指出解决方案的方向。
通过对所有td元素td {font-weight：bold;}进行样式设置，然后使用相邻的同级选择器选择第2-5列，并将其样式设置为正常的td + td {font-weight：normal;}。
瞧，一切都很好:)
