表列格式

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

  • 是的,你的权利CSS选择器是丑陋的:)但我个人更喜欢丑陋的CSS选择器,而不是必须为每个表格单元格添加一个类属性,特别是如果你有一个静态表(即没有涉及服务器端生成)有很多细胞. (3认同)
  • 唉,这对于colspans来说会在语义上破裂.这就是`col`和`colgroup`元素的重点,为什么你不能用它们设置颜色?! (2认同)

Her*_*ill 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>
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)

另外:我假设您的上述代码仅用于演示目的,而您实际上并不打算使用内联样式.