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>

回答1:

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.

回答2:

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.

回答3:

You might have just needed this:

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

回答4:

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

回答5:

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

回答6:

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

来源：https://stackoverflow.com/questions/157770/table-column-formatting

标签

css

css-tables

col