我正在尝试使用<table/>
元素格式化<col/>
中的列。我可以设置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>
答案 0 :(得分:36)
据我所知,您只能使用<col>
元素上的CSS格式化以下内容:
此page有更多信息。
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中不起作用。
答案 1 :(得分:6)
您最好的选择是直接将样式应用于<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 }
另外:我假设您的上述代码仅用于演示目的,而您实际上并不打算在线应用样式。
答案 2 :(得分:2)
你可能刚刚需要这个:
tr td:first-child label {
font-weight: bold;
}
答案 3 :(得分:1)
通过阅读本文,我试图设置表格,使第一列为粗体文本,其他四列为普通文本。
使用col标签似乎是要走的路,但是我可以使用width属性设置列的宽度,font-weight:bold不起作用
谢谢你指点我的解决方案。
通过设置所有td元素td {font-weight: bold;}
的样式,然后使用相邻的兄弟选择器选择列2-5并将它们设置为正常td + td {font-weight: normal;}
瞧,好极了:))
答案 4 :(得分:0)
您是否尝试通过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>
答案 5 :(得分:-1)
col
标记必须位于colgroup
标记内,这可能与问题有关。