我试图在一个格式化的列<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>
据我所知,你只能格式化以下使用CSS <col>
元素:
此页面有更多信息。
赫伯是正确的-这是最好的样式<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浏览器。然而。
最好的办法就是直接套用您的造型到<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 }
另外:我想上面的代码只是为了演示目的,您实际上并不打算内嵌应用样式。
你可能只是需要这样的:
tr td:first-child label {
font-weight: bold;
}
通过这种解读,因为我试图将风格台,使得第一列是加粗的文字和其他四列将普通文本。 使用列标签似乎是要走的路,但同时我可以设置与宽度列的宽度属性的字体重量:大胆不会为我指明解决问题的方向努力感谢。 由样式所有td元素td {font-weight: bold;}
然后用相邻的兄弟选择器选择列2-5和其样式恢复正常td + td {font-weight: normal;}
瞧,承滴盘好: )
您是否尝试过通过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元素
一个col
标签必须是内部的colgroup
标签,这可能是一些做的问题。