CSS: Target the <td> below a specific <th> using #id or .class NOT nth-child

user_249357 0
Viewed 1994

I want text in all TD below ONE SPECIFIC TH to be BOLD

The table has dynamic columns numbers/positions so I cannot use nth-child()

Example below:

 <table>
  <thead>
<th id="th_name">Name</th>
<th>Price</th>
  </thead>
  <tbody>
<tr>
  <td>Apple</td>
  <td>$10</td>
</tr>
<tr>
  <td>Banana</td>
  <td>$10</td>
</tr>
  </tbody>
</table>

  • <TD>s below NAME should be BOLD

Is it possible to do this with only CSS not Javascript?

html-table css
2 Answers

I don't think it's possible in this way to set one column with bold text...

However regarding the title:

CSS: Target the <td> below a specific <th> using #id or .class NOT nth-child

With the <col> element it is possible to target and style a particular column, but unfortunately only a few properties are available for styling (font-weight isn't one of them)

So it is possible to target and style particular columns, but only in a very limited way.

Here's a demo:

.name {
  font-weight: bold;
  background-color: orange;
}
.th_name {
  background-color: white;
}
<table>
  <colgroup>
    <col class="name">
    <col class="price">
  </colgroup>
  <thead>
    <th class="th_name">Name</th>
    <th>Price</th>
  </thead>
  <tbody>
    <tr>
      <td>Apple</td>
      <td>$10</td>
    </tr>
    <tr>
      <td>Banana</td>
      <td>$10</td>
    </tr>
    <tr>
      <td>Orange</td>
      <td>$15</td>
    </tr>
    <tr>
      <td>Cherry</td>
      <td>$20</td>
    </tr>
  </tbody>
</table>

From the CSS 2.1 spec:

...Nevertheless, some aspects of cells can be influenced by setting properties on columns.

The following properties apply to column and column-group elements:

'border'

The various border properties apply to columns only if 'border-collapse' is set to 'collapse' on the table element. In that case, borders set on columns and column groups are input to the conflict resolution algorithm that selects the border styles at every cell edge.

'background'

The background properties set the background for cells in the column, but only if both the cell and row have transparent backgrounds. See "Table layers and transparency."

'width'

The 'width' property gives the minimum width for the column.

'visibility'

If the 'visibility' of a column is set to 'collapse', none of the cells in the column are rendered, and cells that span into other columns are clipped. In addition, the width of the table is diminished by the width the column would have taken up. See "Dynamic effects" below. Other values for 'visibility' have no effect.

user_7037170

There is no parent-child relationship between your th and td and you can't set it with CSS only. You can just add class to each td you need.

.bold{
  font-weight: bold;
}
<table>
  <thead>
    <th id="th_name">Name</th>
    <th>Price</th>
  </thead>
  <tbody>
    <tr>
      <td class="bold">Apple</td>
      <td>$10</td>
    </tr>
    <tr>
      <td class="bold">Banana</td>
      <td>$10</td>
    </tr>
  </tbody>
</table>

Or use :first-child

td:first-child{
  font-weight: bold;
}
<table>
  <thead>
    <th id="th_name">Name</th>
    <th>Price</th>
  </thead>
  <tbody>
    <tr>
      <td>Apple</td>
      <td>$10</td>
    </tr>
    <tr>
      <td>Banana</td>
      <td>$10</td>
    </tr>
  </tbody>
</table>

user_10346370
Related