18

我正在尝试<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>
4

6 回答 6

36

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

  • 背景颜色
  • 边界
  • 宽度
  • 能见度

页面有更多信息。

Herb 是对的 - 最好<td>直接设计 's 样式。我要做的是:

<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 中不起作用。

于 2008-10-01T21:29:22.210 回答
6

您最好的选择是将您的样式直接应用于<td>标签。我从未使用过标签,但大多数浏览器允许您在and /级别<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 }

另外:我假设您上面的代码仅用于演示目的,您实际上并不会内联应用样式。

于 2008-10-01T14:56:58.037 回答
2

你可能只需要这个:

tr td:first-child label {
    font-weight: bold;
}
于 2014-11-13T16:02:29.370 回答
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 元素的参考

于 2008-10-01T14:20:39.590 回答
1

在我尝试设置表格样式时通读此内容,以使第一列为粗体文本,其他四列为普通文本。使用 col 标记似乎是可行的方法,但是虽然我可以使用 width 属性设置列的宽度,但 font-weight: bold 不起作用感谢您为我指明解决方案的方向。通过设置所有 td 元素的样式td {font-weight: bold;},然后使用相邻的同级选择器来选择第 2-5 列并将它们的样式恢复为正常td + td {font-weight: normal;} Voila,一切都很好:)

于 2010-01-16T21:16:31.823 回答
-1

col标签必须在标签内colgroup,这可能与问题有关。

于 2008-10-01T14:12:35.863 回答