CODEWITHSUNDEEP
cssbootstrap-4sassreact-bootstrap
Enigmatic
Enigmatic

Reputation: 612

Background Color not working with display contents

I am trying to add border and background-color to my table but it's not getting applied.

CSS of my table :-

table {
  width: 100%;
  display: grid;
  overflow: auto;
}
    
table thead,
table tbody,
table tr {
  display: contents;
}

CSS trying to apply which is not working

tbody tr:nth-child(odd) { 
  border: solid 1px #e2e2e2;
  background-color: #f4f4f4;
}
tbody tr:nth-child(even) { 
  border: solid 1px #e2e2e2;
  background-color: blue;
}

Please suggest me a way out, because I need to apply the background-color. I have also tried applying.

tbody tr {
  background-color: blue;
}

This is also not working.

Thanks in advance.

Upvotes: 7

Views: 3744

Answers (1)

Nikola Pavicevic
Nikola Pavicevic

Reputation: 23500

Try to select td :

table {
  width: 100%;
  display: grid;
  overflow: auto;
}
tbody tr:nth-child(odd) > td{ 
  border: solid 1px #e2e2e2;
  background-color: #f4f4f4;
}
tbody tr:nth-child(even) > td{ 
  border: solid 1px #e2e2e2;
  background-color: blue;
}
table thead,
table tbody,
table tr {
  display: contents;
 }
<table>
  <thead>
    <tr>
      <th>header</th>
      <th>header</th>
    </tr>
  </thead>
  <tbody>
    <tr>
      <td>1st row</td>
      <td>1st row</td>
    </tr>
    <tr>
      <td>2nd row</td>
      <td>2nd row</td>
    </tr>
  </tbody>
</table>

Upvotes: 5

Related Questions