18

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>
Brian Tompsett - 汤莱恩
  • 5,753
  • 72
  • 57
  • 129
Andy
  • 1,264
  • 1
  • 10
  • 16

6 Answers6

36

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.

Bill
  • 4,323
  • 8
  • 28
  • 32
  • That just looks to me like you're over-engineering the problem a bit. Why not create a "red", "green" and "blue" class? That would work everywhere, and be much more intuitive than advanced CSS selectors. – Adam Lassek Oct 01 '08 at 21:38
  • 3
    Yep your right the CSS selectors are ugly :) But I personally would prefer ugly CSS selectors than having to add a class attribute to each table cell, especially if you have a static table (i.e., no server side generation involved) that has lots of cells. – Bill Oct 01 '08 at 21:44
  • 2
    Alas, this will break semantically for colspans. That's the whole point of the `col` and `colgroup` elements, why the heck can't you set the color using them?! – Dan Dascalescu Oct 25 '12 at 07:09
6

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.

Linus Caldwell
  • 10,908
  • 12
  • 46
  • 58
Herb Caudill
  • 50,043
  • 39
  • 124
  • 173
  • 1
    This method works fine. I was just trying to avoid putting a class attribute for every first-column td. – Andy Oct 01 '08 at 15:07
3

You might have just needed this:

tr td:first-child label {
    font-weight: bold;
}
Paul
  • 31
  • 1
1

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

mwilliams
  • 9,946
  • 13
  • 50
  • 71
  • Please note that IE (Quirks Mode) does allow for color to work. See http://www.quirksmode.org/css/columns.html. But this is not a solution unfortunately. – Alex Nolasco Jun 13 '11 at 19:27
1

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

Herbt
  • 11
  • 1
-1

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

Philip Morton
  • 129,733
  • 38
  • 88
  • 97