•  03-07-2019
  •  | 
  •  

题

我试图格式中列 <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> 元件：

  • 背景色
  • 边境
  • 宽
  • 可见性

此 页面 有更多的信息。

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>

这不会的工作，在即但是。

其他提示

您最好的选择是将样式直接应用于<td>标签。我从未使用<col>标记，但大多数浏览器允许您在<table>和<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;
}

通过阅读本文，我试图设置表格，使第一列为粗体文本，其他四列为普通文本。 使用col标签似乎是要走的路，但是我可以使用width属性设置列的宽度，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标签内，这可能与问题有关。

许可以下： CC-BY-SA 和 归因
不隶属于 StackOverflow
scroll top