CODEWITHSUNDEEP
htmlcsscss-selectors
user7945230
user7945230

Reputation: 1145

CSS styles does not get applied

I want to apply a background color for the first row in the table. I gave that row a special class name. I also want to apply another color for the rest of the table's rows. The row colors do not get applied. 

.table {
  font-family: sans-serif;
  width: auto;
  overflow: auto;
  display: block;
  border: 1;
}


/*I want the row with class head to be this color*/

.head {
  background-color: yellow;
}


/*I want the rest of the table rows this color*/

.table td {
  background-color: lightblue;
}
<html>

<head>
  <link rel="stylesheet" type="text/css" href="new-style.css">
  <meta charset="UTF-8">
</head>

<body id="body">
  <table align='center' cellspacing=0 cellpadding=1 id="table" border=1 class="table">

    <tr id="head" class="head">
      <td class="head">Name</td>
      <td class="head">Type</td>
    </tr>

    <tr id="initial-row">
      <td width=200> text here</td>
      <td width=200> text here </td>
    </tr>

    <tr id="second-row">
      <td width=200> text here </td>
      <td width=200>text here </td>
    </tr>
  </table>
</body>

</html>

Upvotes: 0

Views: 432

Answers (7)

Sam
Sam

Reputation: 15

<tr id="head" class="head">
    <th class="head">Name</td> <!-- change to th (table heading) -->
    <th class="head">Type</td>
</tr>

css:

th{
    background-color: yellow;
}

Upvotes: 0

Paolo Forgia
Paolo Forgia

Reputation: 6748

In addiction to Pete's answer, I would like to say that if you want to create a table header to use the proper tag <th>

<tr>
  <th class="head">Name</th>
  <th class="head">Type</th>
</tr>

The <th> tag defines a header cell in an HTML table.

An HTML table has two kinds of cells:

  • Header cells - contains header information (created with the element)

  • Standard cells - contains data (created with the element) The text in elements are bold and centered by default.

.table {
  font-family: sans-serif;
  width: auto;
  overflow: auto;
  display: block;
  border: 1;
}


/*I want the row with class head to be this color*/

th {
  background-color: yellow;
}


/*I want the rest of the table rows this color*/

.table td {
  background-color: lightblue;
}
<html>

<head>
  <link rel="stylesheet" type="text/css" href="new-style.css">
  <meta charset="UTF-8">
</head>

<body id="body">
  <table align='center' cellspacing=0 cellpadding=1 id="table" border=1 class="table">

    <tr id="head" class="head">
      <th class="head">Name</th>
      <th class="head">Type</th>
    </tr>

    <tr id="initial-row">
      <td width=200> text here</td>
      <td width=200> text here </td>
    </tr>

    <tr id="second-row">
      <td width=200> text here </td>
      <td width=200>text here </td>
    </tr>
  </table>
</body>

</html>

Upvotes: 1

HughL
HughL

Reputation: 15

As @Pete mentioned, your specificity is incorrect. On a side note, your HTML markup could be improved to use the <thead> also and then your css could simply target <th> elements within the <thead>. This is better for accessibility as it clearly defines you "head" as a table header.

Take a look at the w3c docs on <table> markup for accessibilty @ https://www.w3.org/WAI/tutorials/tables/ or for general information about the markup check out the amazing Mozilla documentation @ https://developer.mozilla.org/en/docs/Web/HTML/Element/table

Something like this:

.table {
  font-family: sans-serif;
  width: auto;
  overflow: auto;
  display: block;
  border: 1;
}


/*I want the row with class head to be this color*/

thead th {
  background-color: yellow;
}


/*I want the rest of the table rows this color*/

tbody td {
  background-color: lightblue;
}

<html>

  <head>
    <link rel="stylesheet" type="text/css" href="new-style.css">
    <meta charset="UTF-8">
  </head>

  <body id="body">
    <table align='center' cellspacing=0 cellpadding=1 id="table" border=1 class="table">
      <thead>
        <tr id="head">
          <th>Name</td>
          <th>Type</td>
        </tr>
      </thead>
      <tbody>
        <tr class="initial-row">
          <td>Text here</td>
          <td>Text here</td>
        </tr>
        <tr class="second-row">
          <td>Text here</td>
          <td>Text here</td>
        </tr>
      </tbody>
    </table>
  </body>

</html>

Upvotes: 0

user2314737
user2314737

Reputation: 29307

One solution is to increase the specificity of the CSS settings for .head

.table {
  font-family: sans-serif;
  width: auto;
  overflow: auto;
  display: block;
  border: 1;
}


/*I want the row with class head to be this color*/

.table .head {
  background-color: yellow;
}


/*I want the rest of the table rows this color*/

.table td {
  background-color: lightblue;
}
<html>

<head>
<link rel="stylesheet" type="text/css" href="new-style.css">
<meta charset="UTF-8">
</head>

<body id="body">
<table align='center' cellspacing=0 cellpadding=1 id="table" border=1 class="table">

<tr id="head" class="head">
<td class="head">Name</td>
<td class="head">Type</td>
</tr>

<tr id="initial-row">
<td width=200> text here</td>
<td width=200 > text here </td>
</tr>

<tr id="second-row">
<td width=200 > text here </td>
<td width=200 >text here </td>
</tr>
</table>
</body>
</html>

Btw, I just noticed that you use table as a class, maybe you should use another name ... more specific

Upvotes: 1

Carl Binalla
Carl Binalla

Reputation: 5401

Remove the class head in the tr then add !important. For some reason the color is not changing without !important even if I re-arranged the css

.table {
  font-family: sans-serif;
  width: auto;
  overflow: auto;
  display: block;
  border: 1;
}


/*I want the row with class head to be this color*/

.head {
  background-color: yellow !important;
}


/*I want the rest of the table rows this color*/

.table td {
  background-color: lightblue;
}
<body id="body">
  <table align='center' cellspacing=0 cellpadding=1 id="table" border=1 class="table">

    <tr id="head">
      <td class="head">Name</td>
      <td class="head">Type</td>
    </tr>

    <tr id="initial-row">
      <td width=200> text here</td>
      <td width=200> text here </td>
    </tr>

    <tr id="second-row">
      <td width=200> text here </td>
      <td width=200>text here </td>
    </tr>
  </table>
</body>

Upvotes: 0

czl
czl

Reputation: 117

/*I want the rest of the table rows this color*/

.table tr {
  background-color: lightblue;
}


/*I want the row with class head to be this color*/

.head {
  background-color: yellow;
}

I think that should be codes above.

Upvotes: -1

Pete
Pete

Reputation: 58412

You're problem is with specificity and order - as you have put the light blue on the td, you need to override that with the yellow on the td too.

You then need to move the yellow declaration below the initial declaration as it is to the same specificity - this means order of the statements matter.

One final thing - remove display:block from the table, otherwise you will break the layout of the table.

.table {
  font-family: sans-serif;
  width: auto;
  overflow: auto;
  border: 1;
  width:100%;
  /* remove display block from here otherwise your table layout will break */
}


/*put this first*/
.table td {
  background-color: lightblue;
}


/*override with this*/
.head td {
  background-color: yellow;
}
<html>

<head>
  <link rel="stylesheet" type="text/css" href="new-style.css">
  <meta charset="UTF-8">
</head>

<body id="body">
  <table align='center' cellspacing=0 cellpadding=1 id="table" border=1 class="table">

    <tr id="head" class="head">
      <td class="head">Name</td>
      <td class="head">Type</td>
    </tr>

    <tr id="initial-row">
      <td width=200> text here</td>
      <td width=200> text here </td>
    </tr>

    <tr id="second-row">
      <td width=200> text here </td>
      <td width=200>text here </td>
    </tr>
  </table>
</body>

</html>

More information on css specificity

Upvotes: 2

Related Questions