表格列格式化

Question

表格列格式化

18

我试图使用<col/>元素格式化一个 <table/>中的列。我可以设置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>

- Andy

6个回答

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 }

此外：我假设您上面的代码仅用于演示目的，您实际上不会应用内联样式。

- Herb Caudill

1

这个方法很好用。我只是想避免为每个第一列的 <code>td</code> 添加一个 <code>class</code> 属性。 - Andy

3

你可能只需要这个：

您可能只是需要这个：

tr td:first-child label {
    font-weight: bold;
}

- Paul

1

当我试图为一个表格设置样式，使得第一列为粗体文本，而其他四列为普通文本时，我阅读了这篇文章。使用col标签似乎是正确的方法，但是虽然我可以使用width属性设置列的宽度，但font-weight:bold却不起作用。感谢您指引我找到解决方案。通过为所有td元素设置样式td {font-weight: bold;}，然后使用相邻兄弟选择器选择2-5列并将它们恢复为正常状态td + td {font-weight: normal;} 完美，一切都好了 :)

- Herbt

1

你尝试过通过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元素的参考资料

- mwilliams

请注意，IE（Quirks Mode）确实允许颜色正常工作。请参见http://www.quirksmode.org/css/columns.html。但不幸的是，这并不是一个解决方案。 - Alex Nolasco

-1

col标签必须位于colgroup标签内部，这可能与问题有关。

- Toytown Mafia

1

正如Andy所说，但要确保它附加到原始内容（他目前无法评论）。col不必在colgroup中。<a href="http://www.w3.org/TR/html401/struct/tables.html#h-11.2.4.2">W3C参考</a> - Mikezx6r

网页内容由stack overflow 提供, 点击上面的

可以查看英文原文，
原文链接

- Bill · Accepted Answer

据我所知，您只能使用CSS在<col>元素上格式化以下内容：

背景颜色
边框
宽度
可见性

此页面提供了更多信息。

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中无法工作。