-->

表列格式(Table Column Formatting)

2019-08-19 04:21发布

我试图在一个格式化的列<table/>使用<col/>元素。 我可以设置background-colorwidth等,但不能设置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>

Answer 1:

据我所知,你只能格式化以下使用CSS <col>元素:

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

此页面有更多信息。

赫伯是正确的-这是最好的样式<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浏览器。然而。



Answer 2:

最好的办法就是直接套用您的造型到<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 }

另外:我想上面的代码只是为了演示目的,您实际上并不打算内嵌应用样式。



Answer 3:

你可能只是需要这样的:

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


Answer 4:

通过这种解读,因为我试图将风格台,使得第一列是加粗的文字和其他四列将普通文本。 使用列标签似乎是要走的路,但同时我可以设置与宽度列的宽度属性的字体重量:大胆不会为我指明解决问题的方向努力感谢。 由样式所有td元素td {font-weight: bold;}然后用相邻的兄弟选择器选择列2-5和其样式恢复正常td + td {font-weight: normal;}瞧,承滴盘好: )



Answer 5:

您是否尝试过通过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元素



Answer 6:

一个col标签必须是内部的colgroup标签,这可能是一些做的问题。



文章来源: Table Column Formatting