代码之家 › 专栏 › 技术社区 › BalusC

表列格式

col css-tables css

BalusC · 技术社区 · 17 年前

我正在尝试设置一个列的格式 <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>

6 回复 | 直到 9 年前

Bill 17 年前

据我所知,您只能在 <col> 要素:

背景色
边境
宽度

这 page

赫伯是对的,最好是设计 <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中不起作用。

Linus Caldwell Emperor 2052 13 年前

最好的选择是将样式直接应用于 <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 }

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

Paul 11 年前

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

mwilliams 17 年前

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

Reference for the col element

Herbt 16 年前

当我试图设置一个表格的样式,使第一列为粗体文本,其余四列为普通文本时,请仔细阅读。使用col标记似乎是一种可行的方法,但尽管我可以使用width属性设置列的宽度,但font-weight:bold不起作用感谢您为我指明解决方案的方向。通过设置所有td元素的样式 td {font-weight: bold;} 然后使用相邻的同级选择器选择列2-5,并将其样式设置回正常 td + td {font-weight: normal;} 瞧,一切都好:)

-1

Philip Morton 17 年前

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