Login/Register
Table Column Formatting
Asked Answered
Solved csscss-tablescol
I

6

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>
Invalidity answered 1/10, 2008 at 14:8 Comment(0)
T
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.

Threat answered 1/10, 2008 at 21:29 Comment(3)
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. – Cultigen
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. – Threat
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?! – Microseism
B
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.

Beach answered 1/10, 2008 at 14:56 Comment(1)
This method works fine. I was just trying to avoid putting a <code>class</code> attribute for every first-column <code>td</code>. – Invalidity
A
3

You might have just needed this:

tr td:first-child label {
    font-weight: bold;
}
Anh answered 13/11, 2014 at 16:2 Comment(0)
K
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

Khaki answered 1/10, 2008 at 14:20 Comment(1)
Please note that IE (Quirks Mode) does allow for color to work. See quirksmode.org/css/columns.html. But this is not a solution unfortunately. – Elbaelbart
T
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 :)

Themselves answered 16/1, 2010 at 21:16 Comment(0)
I
-1

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

Incommensurable answered 1/10, 2008 at 14:12 Comment(1)
As Andy said, but want to make sure it's attached to the original (and he can't comment yet). col DOES NOT have to be in colgroup. <a href="w3.org/TR/html401/struct/tables.html#h-11.2.4.2">W3C Reference</a> – Erythromycin

© 2022 - 2024 — McMap. All rights reserved.