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

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?

edited Jan 1 at 9:41

Brian Tompsett - 汤莱恩

4,2321338102

asked Jan 1 at 7:27

pablorenato

497

1

BTW don't use multi tbody use tr instead

– לבני מלכה
Jan 1 at 7:38

1

As I know it impossible in css!

– לבני מלכה
Jan 1 at 7:47

FYI: Want to do this without assigning an ID/selector tag to the <td> to reduce page file size for large tables with 5-10,000 rows

– pablorenato
Jan 1 at 8:10

@sushil Please do not add deprecated tags to questions.

– Brian Tompsett - 汤莱恩
Jan 1 at 9:42

add a comment |

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?

edited Jan 1 at 9:41

Brian Tompsett - 汤莱恩

4,2321338102

asked Jan 1 at 7:27

pablorenato

497

1

BTW don't use multi tbody use tr instead

– לבני מלכה
Jan 1 at 7:38

1

As I know it impossible in css!

– לבני מלכה
Jan 1 at 7:47

FYI: Want to do this without assigning an ID/selector tag to the <td> to reduce page file size for large tables with 5-10,000 rows

– pablorenato
Jan 1 at 8:10

@sushil Please do not add deprecated tags to questions.

– Brian Tompsett - 汤莱恩
Jan 1 at 9:42

add a comment |

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?

edited Jan 1 at 9:41

Brian Tompsett - 汤莱恩

4,2321338102

asked Jan 1 at 7:27

pablorenato

497

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?

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

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

css html-table

edited Jan 1 at 9:41

Brian Tompsett - 汤莱恩

4,2321338102

asked Jan 1 at 7:27

pablorenato

497

edited Jan 1 at 9:41

Brian Tompsett - 汤莱恩

4,2321338102

asked Jan 1 at 7:27

pablorenato

497

edited Jan 1 at 9:41

Brian Tompsett - 汤莱恩

4,2321338102

edited Jan 1 at 9:41

Brian Tompsett - 汤莱恩

4,2321338102

edited Jan 1 at 9:41

Brian Tompsett - 汤莱恩

4,2321338102

asked Jan 1 at 7:27

pablorenato

497

asked Jan 1 at 7:27

pablorenato

497

asked Jan 1 at 7:27

pablorenato

497

1

BTW don't use multi tbody use tr instead

– לבני מלכה
Jan 1 at 7:38

1

As I know it impossible in css!

– לבני מלכה
Jan 1 at 7:47

FYI: Want to do this without assigning an ID/selector tag to the <td> to reduce page file size for large tables with 5-10,000 rows

– pablorenato
Jan 1 at 8:10

@sushil Please do not add deprecated tags to questions.

– Brian Tompsett - 汤莱恩
Jan 1 at 9:42

add a comment |

1

BTW don't use multi tbody use tr instead

– לבני מלכה
Jan 1 at 7:38

1

As I know it impossible in css!

– לבני מלכה
Jan 1 at 7:47

FYI: Want to do this without assigning an ID/selector tag to the <td> to reduce page file size for large tables with 5-10,000 rows

– pablorenato
Jan 1 at 8:10

@sushil Please do not add deprecated tags to questions.

– Brian Tompsett - 汤莱恩
Jan 1 at 9:42

BTW don't use multi tbody use tr instead

– לבני מלכה
Jan 1 at 7:38

As I know it impossible in css!

– לבני מלכה
Jan 1 at 7:47

FYI: Want to do this without assigning an ID/selector tag to the <td> to reduce page file size for large tables with 5-10,000 rows

– pablorenato
Jan 1 at 8:10

@sushil Please do not add deprecated tags to questions.

– Brian Tompsett - 汤莱恩
Jan 1 at 9:42

add a comment |

2 Answers
2

active

oldest

votes

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.

edited Jan 1 at 10:00

answered Jan 1 at 8:17

Danield

81.2k26167205

Thanks this is the closest I've seen. Why does CSS not make this more expanded to offer the full range of css for children of a column?

– pablorenato
Jan 1 at 9:57

1

@pablorenato that's a question for the guys that wrote the spec ;) - but remember, that was a long time ago, maybe the spec authors just didn't think people would need any more than that.

– Danield
Jan 1 at 10:07

And on that note here is the answer. CSS4 (well level 4 of the selector module) will have it. Sigh. If only they had thought of this with CSS3!!!! css4.rocks/grid-structural-pseudo-classes.php

– pablorenato
Jan 8 at 18:14

add a comment |

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>

answered Jan 1 at 7:48

Itay Gal

8,15552561

Thanks. I want to avoid using first or nth child with an explicit hard coded number. Because the position of columns can change. Also want to avoid adding a selector attribute to the TD to keep the page file size smaller when there are 10,000 table rows downloading. Based on research it seems we must use Javascript to do this?

– pablorenato
Jan 1 at 8:12

1

If you want to reduce the page size (in order to reduce the traffic), don't generate the code on the server side, generate it on the client, for example: Angular, React etc.... this way you only pass the raw data which is much lighter, and the client renders it and generate the full HTML.

– Itay Gal
Jan 1 at 9:10

Thanks will look into this also

– pablorenato
Jan 8 at 18:16

add a comment |

Your Answer

StackExchange.ifUsing("editor", function () {
StackExchange.using("externalEditor", function () {
StackExchange.using("snippets", function () {
StackExchange.snippets.init();
});
});
}, "code-snippets");

StackExchange.ready(function() {
var channelOptions = {
tags: "".split(" "),
id: "1"
};
initTagRenderer("".split(" "), "".split(" "), channelOptions);

StackExchange.using("externalEditor", function() {
// Have to fire editor after snippets, if snippets enabled
if (StackExchange.settings.snippets.snippetsEnabled) {
StackExchange.using("snippets", function() {
createEditor();
});
}
else {
createEditor();
}
});

function createEditor() {
StackExchange.prepareEditor({
heartbeatType: 'answer',
autoActivateHeartbeat: false,
convertImagesToLinks: true,
noModals: true,
showLowRepImageUploadWarning: true,
reputationToPostImages: 10,
bindNavPrevention: true,
postfix: "",
imageUploader: {
brandingHtml: "Powered by u003ca class="icon-imgur-white" href="https://imgur.com/"u003eu003c/au003e",
contentPolicyHtml: "User contributions licensed under u003ca href="https://creativecommons.org/licenses/by-sa/3.0/"u003ecc by-sa 3.0 with attribution requiredu003c/au003e u003ca href="https://stackoverflow.com/legal/content-policy"u003e(content policy)u003c/au003e",
allowUrls: true
},
onDemand: true,
discardSelector: ".discard-answer"
,immediatelyShowMarkdownHelp:true
});

}
});

draft saved

draft discarded

Sign up or log in

StackExchange.ready(function () {
StackExchange.helpers.onClickDraftSave('#login-link');
});

Post as a guest

Name

Required, but never shown

StackExchange.ready(
function () {
StackExchange.openid.initPostLogin('.new-post-login', 'https%3a%2f%2fstackoverflow.com%2fquestions%2f53993763%2fcss-target-the-td-below-a-specific-th-using-id-or-class-not-nth-child%23new-answer', 'question_page');
}
);

Post as a guest

Name

Required, but never shown

2 Answers
2

active

oldest

votes

2 Answers
2

active

oldest

votes

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.

edited Jan 1 at 10:00

answered Jan 1 at 8:17

Danield

81.2k26167205

Thanks this is the closest I've seen. Why does CSS not make this more expanded to offer the full range of css for children of a column?

– pablorenato
Jan 1 at 9:57

1

@pablorenato that's a question for the guys that wrote the spec ;) - but remember, that was a long time ago, maybe the spec authors just didn't think people would need any more than that.

– Danield
Jan 1 at 10:07

And on that note here is the answer. CSS4 (well level 4 of the selector module) will have it. Sigh. If only they had thought of this with CSS3!!!! css4.rocks/grid-structural-pseudo-classes.php

– pablorenato
Jan 8 at 18:14

add a comment |

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.

edited Jan 1 at 10:00

answered Jan 1 at 8:17

Danield

81.2k26167205

Thanks this is the closest I've seen. Why does CSS not make this more expanded to offer the full range of css for children of a column?

– pablorenato
Jan 1 at 9:57

1

@pablorenato that's a question for the guys that wrote the spec ;) - but remember, that was a long time ago, maybe the spec authors just didn't think people would need any more than that.

– Danield
Jan 1 at 10:07

And on that note here is the answer. CSS4 (well level 4 of the selector module) will have it. Sigh. If only they had thought of this with CSS3!!!! css4.rocks/grid-structural-pseudo-classes.php

– pablorenato
Jan 8 at 18:14

add a comment |

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.

edited Jan 1 at 10:00

answered Jan 1 at 8:17

Danield

81.2k26167205

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.

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

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

edited Jan 1 at 10:00

answered Jan 1 at 8:17

Danield

81.2k26167205

edited Jan 1 at 10:00

answered Jan 1 at 8:17

Danield

81.2k26167205

answered Jan 1 at 8:17

Danield

81.2k26167205

answered Jan 1 at 8:17

Danield

81.2k26167205

Thanks this is the closest I've seen. Why does CSS not make this more expanded to offer the full range of css for children of a column?

– pablorenato
Jan 1 at 9:57

1

@pablorenato that's a question for the guys that wrote the spec ;) - but remember, that was a long time ago, maybe the spec authors just didn't think people would need any more than that.

– Danield
Jan 1 at 10:07

And on that note here is the answer. CSS4 (well level 4 of the selector module) will have it. Sigh. If only they had thought of this with CSS3!!!! css4.rocks/grid-structural-pseudo-classes.php

– pablorenato
Jan 8 at 18:14

add a comment |

Thanks this is the closest I've seen. Why does CSS not make this more expanded to offer the full range of css for children of a column?

– pablorenato
Jan 1 at 9:57

1

@pablorenato that's a question for the guys that wrote the spec ;) - but remember, that was a long time ago, maybe the spec authors just didn't think people would need any more than that.

– Danield
Jan 1 at 10:07

And on that note here is the answer. CSS4 (well level 4 of the selector module) will have it. Sigh. If only they had thought of this with CSS3!!!! css4.rocks/grid-structural-pseudo-classes.php

– pablorenato
Jan 8 at 18:14

Thanks this is the closest I've seen. Why does CSS not make this more expanded to offer the full range of css for children of a column?

– pablorenato
Jan 1 at 9:57

@pablorenato that's a question for the guys that wrote the spec ;) - but remember, that was a long time ago, maybe the spec authors just didn't think people would need any more than that.

– Danield
Jan 1 at 10:07

And on that note here is the answer. CSS4 (well level 4 of the selector module) will have it. Sigh. If only they had thought of this with CSS3!!!! css4.rocks/grid-structural-pseudo-classes.php

– pablorenato
Jan 8 at 18:14

add a comment |

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>

answered Jan 1 at 7:48

Itay Gal

8,15552561

Thanks. I want to avoid using first or nth child with an explicit hard coded number. Because the position of columns can change. Also want to avoid adding a selector attribute to the TD to keep the page file size smaller when there are 10,000 table rows downloading. Based on research it seems we must use Javascript to do this?

– pablorenato
Jan 1 at 8:12

1

If you want to reduce the page size (in order to reduce the traffic), don't generate the code on the server side, generate it on the client, for example: Angular, React etc.... this way you only pass the raw data which is much lighter, and the client renders it and generate the full HTML.

– Itay Gal
Jan 1 at 9:10

Thanks will look into this also

– pablorenato
Jan 8 at 18:16

add a comment |

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>

answered Jan 1 at 7:48

Itay Gal

8,15552561

Thanks. I want to avoid using first or nth child with an explicit hard coded number. Because the position of columns can change. Also want to avoid adding a selector attribute to the TD to keep the page file size smaller when there are 10,000 table rows downloading. Based on research it seems we must use Javascript to do this?

– pablorenato
Jan 1 at 8:12

1

If you want to reduce the page size (in order to reduce the traffic), don't generate the code on the server side, generate it on the client, for example: Angular, React etc.... this way you only pass the raw data which is much lighter, and the client renders it and generate the full HTML.

– Itay Gal
Jan 1 at 9:10

Thanks will look into this also

– pablorenato
Jan 8 at 18:16

add a comment |

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>

answered Jan 1 at 7:48

Itay Gal

8,15552561

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>

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

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

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>

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>

answered Jan 1 at 7:48

Itay Gal

8,15552561

answered Jan 1 at 7:48

Itay Gal

8,15552561

answered Jan 1 at 7:48

Itay Gal

8,15552561

answered Jan 1 at 7:48

Itay Gal

8,15552561

Thanks. I want to avoid using first or nth child with an explicit hard coded number. Because the position of columns can change. Also want to avoid adding a selector attribute to the TD to keep the page file size smaller when there are 10,000 table rows downloading. Based on research it seems we must use Javascript to do this?

– pablorenato
Jan 1 at 8:12

1

If you want to reduce the page size (in order to reduce the traffic), don't generate the code on the server side, generate it on the client, for example: Angular, React etc.... this way you only pass the raw data which is much lighter, and the client renders it and generate the full HTML.

– Itay Gal
Jan 1 at 9:10

Thanks will look into this also

– pablorenato
Jan 8 at 18:16

add a comment |

Thanks. I want to avoid using first or nth child with an explicit hard coded number. Because the position of columns can change. Also want to avoid adding a selector attribute to the TD to keep the page file size smaller when there are 10,000 table rows downloading. Based on research it seems we must use Javascript to do this?

– pablorenato
Jan 1 at 8:12

1

If you want to reduce the page size (in order to reduce the traffic), don't generate the code on the server side, generate it on the client, for example: Angular, React etc.... this way you only pass the raw data which is much lighter, and the client renders it and generate the full HTML.

– Itay Gal
Jan 1 at 9:10

Thanks will look into this also

– pablorenato
Jan 8 at 18:16

Thanks. I want to avoid using first or nth child with an explicit hard coded number. Because the position of columns can change. Also want to avoid adding a selector attribute to the TD to keep the page file size smaller when there are 10,000 table rows downloading. Based on research it seems we must use Javascript to do this?

– pablorenato
Jan 1 at 8:12

If you want to reduce the page size (in order to reduce the traffic), don't generate the code on the server side, generate it on the client, for example: Angular, React etc.... this way you only pass the raw data which is much lighter, and the client renders it and generate the full HTML.

– Itay Gal
Jan 1 at 9:10

Thanks will look into this also

– pablorenato
Jan 8 at 18:16

add a comment |

draft saved

draft discarded

Thanks for contributing an answer to Stack Overflow!

Please be sure to answer the question. Provide details and share your research!

But avoid …

Asking for help, clarification, or responding to other answers.

Making statements based on opinion; back them up with references or personal experience.

To learn more, see our tips on writing great answers.

draft saved

draft discarded

Sign up or log in

StackExchange.ready(function () {
StackExchange.helpers.onClickDraftSave('#login-link');
});

Post as a guest

Name

Required, but never shown

Post as a guest

Name

Required, but never shown

Sign up or log in

StackExchange.ready(function () {
StackExchange.helpers.onClickDraftSave('#login-link');
});

Post as a guest

Name

Required, but never shown

Sign up or log in

StackExchange.ready(function () {
StackExchange.helpers.onClickDraftSave('#login-link');
});

Post as a guest

Name

Required, but never shown

Sign up or log in

StackExchange.ready(function () {
StackExchange.helpers.onClickDraftSave('#login-link');
});

Post as a guest

Name

Required, but never shown

Name

Required, but never shown

Name

Required, but never shown

This page is only for reference, If you need detailed information, please check here

Search This Blog

Ufyukyu