And*_*ndy 18 css col css-tables
我正在尝试<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>
Run Code Online (Sandbox Code Playgroud)
Bil*_*ill 36
据我所知,你只能在<col>元素上使用CSS格式化以下内容:
此页面有更多信息.
赫伯是对的 - <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>
Run Code Online (Sandbox Code Playgroud)
然而,这在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>
Run Code Online (Sandbox Code Playgroud)
然后这个CSS将无法正常工作
tr.Highlight { background:yellow }
Run Code Online (Sandbox Code Playgroud)
但这会
tr.Highlight td { background:yellow }
Run Code Online (Sandbox Code Playgroud)
另外:我假设您的上述代码仅用于演示目的,而您实际上并不打算使用内联样式.