Style table row with TH + TD

HTML & CSS
#1

Is there an easy way to style a table row which has both a TH and TD’s?

<tr>
	<th>Rain Coat</th>
	<td>Child's</td>
	<td>Yellow</td>
	<td>$39.99</td>
</tr>

If I add a class to TR then it just styles the TD’s.

And it’s a pain to have to add a class to TR and the TH. :frowning:

#2

This seems to cover it with what looks to be a decent example.

1 Like
#3

@chrisofarabia,

Huh?

There is no example. You gae a link to the MDN manual which says nothing about my OP and which I have already read…

#4

I’m guessing you are wanting to zebra stripe your rows.

In one of your other threads the th had a bg-color set on it. That bg-color would layer on top of the rows bg-color and cause a conflict.

If your wanting zebra stripe remove the bg-color from the th and style the rows with a bg-color.

#5

@Ray.H,

No.

I want an easy way to make a row of data in the < tbody > to be all bold or a certain text color.

I turned off bold on TH in the TBODY because I don’t normally like that. But now I need an entire row to be bold, i.e. TBODY TH and TBODY TD’s

<tr>
	<th>Rain Coat</th>
	<td>Child's</td>
	<td>Yellow</td>
	<td>$39.99</td>
</tr>

If I have this style…

.bold{
     font-weight: bold;
}

And I add it like this…

<tr class="bold>

then it only bolds the TD’s in TBODY.

So then I have to do this which is a pain…

<tr class="bold>
	<th <tr class="bold>>Rain Coat</th>
	<td>Child's</td>
	<td>Yellow</td>
	<td>$39.99</td>
</tr>
#6

Are you sure you don’t have some other styling for the th element, that has more specificity and therefore overriding your bold class on the tr? This code works fine to bold all the elements in the row:

<!DOCTYPE html>
<html>
<head>
<meta content="text/html; charset=utf-8" http-equiv="Content-Type">
<title>Untitled 1</title>
<style>
	.bold {font-weight: bold}
</style>
</head>
<body>
<table>
<tr class="bold">
	<th>Rain Coat</th>
	<td>Child's</td>
	<td>Yellow</td>
	<td>$39.99</td>
</tr>
</table>
</body>
</html>
#7

You were almost there, just add .bold th to it, comma separated.


.bold, .bold th {font-weight:bold;}

Screenshot

<!doctype html>
<html lang="en">
<head>
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Test Page</title>
<style>
table {
  margin: 1em 2em;
  border-collapse: collapse;
}
td, th {
  border: 1px solid #000;
  padding: 4px;
}
th[scope="row"] {
 text-align:left;
 font-weight: normal;
 /*background:#eee; remove this*/
}
th.arrow::before {
  content:'\27A4';
  color: red;
  position: absolute;
  margin-left:-1.5em;
}
tbody tr:nth-child(odd) {
  background: yellow;
}
.bold, .bold th {font-weight:bold;}

</style>

</head>
<body>

<table>
  <thead>
    <tr>
      <th scope="col">Product</th>
      <th scope="col">Description</th>
      <th scope="col">Price</th>
    </tr>
  </thead>

  <tbody>
    <tr>
      <th scope="row">Men's Bathrobe</th>
      <td>Heavy, good for Winter...</td>
      <td>$35.99</td>
    </tr>
    <tr class="bold">
      <th class="arrow" scope="row">Fuzzy Slippers</th>
      <td>Warm, cozy slippers...</td>
      <td>$19.99</td>
    </tr>
    <tr>
      <th scope="row">Flannel Shirt</th>
      <td>Heavy, good for Winter...</td>
      <td>$22.99</td>
    </tr>
  </tbody>
</table>

</body>
</html>
3 Likes
#8

@Ray.H,

You’re the man!!

It was a specificity issue as I guess you gathered…

This code

tbody th{
	font-weight: normal;
	text-align: left;
}

was beating out this code

.bold{
	font-weight: bold;
}

So you’re code solves that issue and it makes my HTML cleaner.

Thanks! :+1:

P.S. Can you explain this code…

th[scope="row"] {
 text-align:left;
 font-weight: normal;
 /*background:#eee; remove this*/
}

Apparently that works the same as

<th scope="row"></th>
#9

It’s an attribute selector, it was used in your other thread.

It is targeting the row th so as not to remove the bold font from the thead col th.

It keeps you from having to introduce another class in the html

Had you just said…

th {font-weight:normal}

It would target both row and col th elements

Well you removed the default bold font so you had to put it back for that class only

2 Likes