Table Column Formatting

I'm trying to format a column in a <table/> using a <col/> element. I can set background-color, width, etc., but can't set the font-weight. Why doesn't it work?

<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 css-tables col

6条回答

姐就是有狂的资本

2楼-- · 2019-03-12 08:50

Reading through this as I was attempting to style a table such that the first column would be bold text and the the other four columns would be normal text. Using col tag seemed like the way to go but while I could set the widths of the columns with the width attribute the font-weight: bold wouldn't work Thanks for pointing me in the direction of the solution. By styling all the td elements td {font-weight: bold;} and then using an adjacent sibling selector to select columns 2-5 and style them back to normal td + td {font-weight: normal;} Voila, alls good :)

0人赞添加讨论(0) 举报

够拽才男人

3楼-- · 2019-03-12 08:52

Your best bet is to apply your styling directly to the <td> tags. I've never used the <col> tag, but most browsers let you apply formatting at the <table> and <td>/<th> level, but not at an intermediate level. For example if you have

<table>
    <tr class="Highlight">
        <td>One</td>
        <td>Two</td>
    </tr>
    <tr>
        <td>A</td>
        <td>B</td>
    </tr>
</table>

then this CSS won't work

tr.Highlight { background:yellow }

but this will

tr.Highlight td { background:yellow }

Also: I assume your code above is just for demonstration purposes and you're not actually going to apply styles inline.

0人赞添加讨论(0) 举报

▲ chillily

4楼-- · 2019-03-12 08:58

As far as I know, you can only format the following using CSS on the <col> element:

background-color
border
width
visibility

This page has more info.

Herb is right - it's better to style the <td>'s directly. What I do is the following:

<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>

This won't work in IE however.

0人赞添加讨论(0) 举报

孤傲高冷的网名

5楼-- · 2019-03-12 09:01

You might have just needed this:

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

0人赞添加讨论(0) 举报

做个烂人

6楼-- · 2019-03-12 09:04

A col tag must be inside of a colgroup tag, This may be something to do with the problem.

0人赞添加讨论(0) 举报

甜甜的少女心

7楼-- · 2019-03-12 09:06

Have you tried applying the style through a CSS class?

The following appears to work:

<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

0人赞添加讨论(0) 举报

Table Column Formatting

采纳回答

编辑标签

举报内容

检举类型

检举原因

检举说明(必填)

打开微信“扫一扫”，打开网页后点击屏幕右上角分享按钮

付费偷看金额在0.1-10元之间