<link href="//maxcdn.bootstrapcdn.com/bootstrap/4.1.1/css/bootstrap.min.css" rel="stylesheet" id="bootstrap-css"> <script src="//maxcdn.bootstrapcdn.com/bootstrap/4.1.1/js/bootstrap.min.js"></script> <script src="//cdnjs.cloudflare.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script> <!------ Include the above in your HEAD tag ----------> <div class="container py-4"> <div class="coE-card"> <div class="table-responsive"> <h2>Table/Grid</h2> <table class="table align-items-center table-flush table-hover table-link mb-0"> <thead> <tr> <th>Sr. No. </th> <th>First Name </th> <th>Last Name</th> <th>Age</th> <th>Gender</th> <th>Month</th> <th>Savings</th> </tr> </thead> <tbody> <tr> <td>1</td> <td>John</td> <td>Smith</td> <td>23</td> <td>Male</td> <td>July</td> <td>$33</td> </tr> <tr> <td>2</td> <td>John</td> <td>Doe</td> <td>23</td> <td>Male</td> <td>June</td> <td>$67</td> </tr> <tr> <td>3</td> <td>James</td> <td>Smith</td> <td>23</td> <td>Male</td> <td>December</td> <td>$39</td> </tr> <tr> <td>4</td> <td>Richard</td> <td>Roe</td> <td>23</td> <td>Male</td> <td>July</td> <td>$14</td> </tr> <tr> <td>5</td> <td>Joe</td> <td>Public</td> <td>23</td> <td>Male</td> <td>July</td> <td>$52</td> </tr> </tbody> </table> </div> </div> </div>

@import url('https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/css/bootstrap.min.css'); @import url('https://fonts.googleapis.com/css2?family=Source+Sans+Pro:wght@300;400;600;700;900&family=Titillium+Web:wght@200;400;600;700;900&display=swap'); body { height: 100%; font-family: 'Source Sans Pro', sans-serif, 'FontAwesome' !important; font-size: 14px; } .coE-card h1, .coE-card h2, .coE-card h3, .coE-card h4, .coE-card h5 { font-family: 'Titillium Web', sans-serif, 'FontAwesome' !important; font-weight: 900; color: #4bcd3e; } .coE-card { -webkit-box-shadow: 0 0.15rem 1.75rem 0 rgba(58, 59, 69, 0.15) !important; box-shadow: 0 0.15rem 1.75rem 0 rgba(58, 59, 69, 0.15) !important; margin-bottom: 10px; padding: 15px 10px; } .coE-card .table thead th { border-bottom: 2px solid #003b4d; color: #003b4d; border-top: 0px solid; padding: 6px 8px; border-right: 0; border-left: 0; } .coE-card .table-flush tbody tr:first-child td, .coE-card .table-flush tbody tr:first-child th { border-top: 0; } .coE-card .table td, .coE-card .table th { padding: 6px 8px; } .bg-gray { background-color: #f5f5f5; } .coE-card table, .coE-card .table-hover tbody tr:hover { color: #4e4e4e; }