<link href="//maxcdn.bootstrapcdn.com/bootstrap/4.0.0/css/bootstrap.min.css" rel="stylesheet" id="bootstrap-css"> <script src="//maxcdn.bootstrapcdn.com/bootstrap/4.0.0/js/bootstrap.min.js"></script> <script src="//code.jquery.com/jquery-1.11.1.min.js"></script> <!------ Include the above in your HEAD tag ----------> <div class="container"> <div class="row"> <div class="table-responsive table-bordered movie-table"> <table class="table movie-table"> <thead> <tr class= "movie-table-head"> <th>Movie Name</th> <th>Review</th> <th>Rental/Sale</th> <th>Rating</th> </tr> </thead> <tbody> <!--row--> <tr class= "dark-row"> <td >Toy Story</td> <td> <span style="color:green;">5</span> /5 </td> <td>40</td> <td>Both</td> </tr> <!--/.row--> <!--row--> <tr class="light-row"> <td>The Shining</td> <td> <span style="color:green;">5</span> /5 </td> <td>37</td> <td>Both</td> </tr> <!--/.row--> <!--row--> <tr class = "dark-row"> <td>Rubber</td> <td> <span style="color:red;">1</span> /5 </td> <td>20</td> <td>Rental</td> </tr> <!--/.row--> <!--row--> <tr class="light-row"> <td>The Hangover</td> <td> <span style="color:orange;">3</span> /5 </td> <td>33</td> <td>Sale</td> </tr> <!--/.row--> </tbody> </table> </div> </div> </div>

.dark-row{ background:#AEC5E8; } .light-row{ background:#F1F3F0; } .movie-table-head{ background: ; }