feture

                                     Use CSS variable(Table style)

                                                 

This is CSS sheet

/* table anamition */

.table332 tr:nth-child(even):hover{

    background-color: rgba(248, 103, 51, 0.849);

}

.table332 tr:nth-child(odd):hover{

    background-color: rgba(248, 103, 51, 0.849);

}

tr, th{

    padding: 20px;

    text-align: center;

}

.table332{

    margin-left: 30px;

   

}

.table332 tr:nth-child(even){

    background-color: rgb(180, 172, 172);

}

.table332 tr:nth-child(odd){

    background-color: rgb(119, 173, 10);

}

This is HTML sheet

<div >

                   <table class="table332">

                <caption><h1>This is my Group stadey Reopet.</h1></caption><br>

                       <tr style="height: 30px

                       ;">

                           <th>ID</th>

                           <th>Class</th>

                           <th>Help</th>

                           <th>About</th>

                       </tr>

                       <tr>

                           <td>101</td>

                           <td>Nine</td>

                           <td>0170965245</td>

                           <td>Lorem ipsum dolor sit amet consectetur adipisicing elit. Magni, quis.</td>

                       </tr>

                       <tr>

                           <td>102</td>

                           <td>Nine</td>

                           <td>0130965245</td>

                           <td>Lorem ipsum dolor sit amet consectetur adipisicing elit. Magni, quis.</td>

                       </tr>

                       <tr>

                           <td>103</td>

                           <td>Nine</td>

                           <td>0180965245</td>

                           <td>Lorem ipsum dolor sit amet consectetur adipisicing elit. Magni, quis.</td>

                       </tr>

                       <tr>

                           <td>104</td>

                           <td>Nine</td>

                           <td>0150965245</td>

                           <td>Lorem ipsum dolor sit amet consectetur adipisicing elit. Magni, quis.</td>

                       </tr>

                       <tr>

                           <td>104</td>

                           <td>Nine</td>

                           <td>0150965245</td>

                           <td>Lorem ipsum dolor sit amet consectetur adipisicing elit. Magni, quis.</td>

                       </tr>

                       <tr>

                           <td>104</td>

                           <td>Nine</td>

                           <td>0150965245</td>

                           <td>Lorem ipsum dolor sit amet consectetur adipisicing elit. Magni, quis.</td>

                       </tr>

                       <tr>

                           <td>104</td>

                           <td>Nine</td>

                           <td>0150965245</td>

                           <td>Lorem ipsum dolor sit amet consectetur adipisicing elit. Magni, quis.</td>

                       </tr>

                       <tr>

                           <td>104</td>

                           <td>Nine</td>

                           <td>0150965245</td>

                           <td>Lorem ipsum dolor sit amet consectetur adipisicing elit. Magni, quis.</td>

                       </tr>

                   </table>

               </div>

               <div class="div-clear"><br><hr><br>