Search code examples
htmlcolorsbackgroundraw

Changing Raw Background Color


I would like to change the background color of the raw but it wont change

i have typed but still wont change <tr class="bg-green text-white">

<table border="0" class="table-striped" style="width:100%;table-layout:fixed">
   <thead>
     <tr class="bg-green text-white">
        <th style="text-align:center">الترتيب</th>
        <th style="text-align:center">النادي</th>
        <th style="text-align:center">لعب</th>
        <th style="text-align:center">فاز</th>
        <th style="text-align:center">تعادل</th>
        <th style="text-align:center">خسر</th>
        <th class="d-none d-sm-table-cell" style="text-align:center">له</th>
        <th class="d-none d-sm-table-cell" style="text-align:center">عليه</th>
        <th style="text-align:center">فارق</th>
        <th style="text-align:center">نقاط</th>
      </tr>
   </thead>
</table>

Solution

  • If you are using bootstrap you can use some common class to change the background color of the row. like-

    <!-- On rows -->
    <tr class="table-active">...</tr>
    
    <tr class="table-primary">...</tr>
    <tr class="table-secondary">...</tr>
    <tr class="table-success">...</tr>
    <tr class="table-danger">...</tr>
    <tr class="table-warning">...</tr>
    <tr class="table-info">...</tr>
    <tr class="table-light">...</tr>
    <tr class="table-dark">...</tr>
    
    <!-- On cells (`td` or `th`) -->
    <tr>
      <td class="table-active">...</td>
      
      <td class="table-primary">...</td>
      <td class="table-secondary">...</td>
      <td class="table-success">...</td>
      <td class="table-danger">...</td>
      <td class="table-warning">...</td>
      <td class="table-info">...</td>
      <td class="table-light">...</td>
      <td class="table-dark">...</td>
    </tr>
    

    Bootstrap Ref

    But if you are trying to change using only html and css, then you can try it like this.

    tr{
      background-color: blue;
    }