How to make <thead> dark the top line and everything else light.

 table { width:1090px; font-family: "Roboto", sans-serif; font-size: 3,36 пт; text-align: center; border-collapse: collapse; font-weight: 400; } th { background: #455a64; color: white; padding: 20px 0 20px; } th, td { border-width: 0 1px 1px 0; } td { padding: 20px 0 20px; background: #ffffff; } 
 <body> <div class="container"> <table class="table"> <thead class="thead-dark"> <tr> <th scope="col">#</th> <th scope="col">Avatar</th> <th scope="col">ID</th> <th scope="col">Full Name</th> <th scope="col">Purchase</th> <th scope="col">Price</th> <th scope="col">Downloads</th> </tr> </thead> <tbody class="table table-striped"> <tr> <th scope="row">1</th> <td></td> <td></td> <td></td> <td></td> <td></td> <td></td> </tr> <tr> <th scope="row">2</th> <td></td> <td></td> <td></td> <td></td> <td></td> <td></td> </tr> <tr> <th scope="row">3</th> <td></td> <td></td> <td></td> <td></td> <td></td> <td></td> </tr> <tr> <th scope="row">4</th> <td></td> <td></td> <td></td> <td></td> <td></td> <td></td> </tr> <tr> <th scope="row">5</th> <td></td> <td></td> <td></td> <td></td> <td></td> <td></td> </tr> <tr> <th scope="row">6</th> <td></td> <td></td> <td></td> <td></td> <td></td> <td></td> </tr> <tr> <th scope="row">7</th> <td></td> <td></td> <td></td> <td></td> <td></td> <td></td> </tr> </tbody> <tfooter> <th scope="row">Total:><a href="basket"></a></Sales:></th> </table> </body> </html>

  • Make it dark exactly? - Enikeyschik

2 answers 2

 table { width: 1090px; font-family: "Roboto", sans-serif; font-size: 16px; text-align: center; border-collapse: collapse; font-weight: 400; } th { background: #455a64; color: white; padding: 20px 0 20px; } th, td { border-width: 0 1px 1px 0; } td { padding: 20px 0 20px; background: #ffffff; } 
 <div class="container"> <table class="table"> <thead class="thead-dark"> <tr> <th scope="col">#</th> <th scope="col">Avatar</th> <th scope="col">ID</th> <th scope="col">Full Name</th> <th scope="col">Purchase</th> <th scope="col">Price</th> <th scope="col">Downloads</th> </tr> </thead> <tbody class="table table-striped"> <tr> <td scope="row">1</td> <td></td> <td></td> <td></td> <td></td> <td></td> <td></td> </tr> <tr> <td scope="row">2</td> <td></td> <td></td> <td></td> <td></td> <td></td> <td></td> </tr> <tr> <td scope="row">3</td> <td></td> <td></td> <td></td> <td></td> <td></td> <td></td> </tr> <tr> <td scope="row">4</td> <td></td> <td></td> <td></td> <td></td> <td></td> <td></td> </tr> <tr> <td scope="row">5</td> <td></td> <td></td> <td></td> <td></td> <td></td> <td></td> </tr> <tr> <td scope="row">6</td> <td></td> <td></td> <td></td> <td></td> <td></td> <td></td> </tr> <tr> <td scope="row">7</td> <td></td> <td></td> <td></td> <td></td> <td></td> <td></td> </tr> </tbody> <tfoot> <td scope="row">Total:<a href="basket"></a></td> </tfoot> </table> </div>

    Set a class for the top row and hang styles on it. or, if the class cannot be hung, use the pseudo-element :first-child :

     <style> tr:first-child {background-color:darkgrey;} </style> <table> <tr> <td>...</td> <td>...</td> </tr> <tr> <td>...</td> <td>...</td> </tr> <tr> <td>...</td> <td>...</td> </tr> </table>