<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="//code.jquery.com/jquery-1.11.1.min.js"></script> <!------ Include the above in your HEAD tag ----------> <div class="container"> <h2>Show More & Show Less</h2> <br> <div id="boom" class="collapse show"> <div class="table-responsive"> <table class="table"> <thead class="thead"> <tr> <th>#</th> <th>Name</th> <th>Age</th> <th>Sex</th> </tr> </thead> <tbody> <tr> <td>1</td> <td>Lifna</td> <td>23</td> <td>Female</td> </tr> <tr> <td>2</td> <td>Clint</td> <td>21</td> <td>Male</td> </tr> <tr> <td>3</td> <td>Rojjer</td> <td>19</td> <td>Male</td> </tr> <tr> <td>4</td> <td>Jon</td> <td>22</td> <td>Male</td> </tr> <tr> <td>5</td> <td>Cruz</td> <td>25</td> <td>Male</td> </tr> <tr> <td>6</td> <td>Emma</td> <td>23</td> <td>female</td> </tr> </tbody> </table> </div> </div> <button type="button" class="btnS" data-toggle="collapse" data-target="#boom">Show</button> </div> <script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.12.6/umd/popper.min.js"></script> <script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0-beta.2/js/bootstrap.min.js"></script>

tbody{font-size: 16px;background-color: transparent;} .thead{background-color: #1A1A1A;font-size: 18px; color: white;font-weight:normal;} .btnS{float: right;background-color: hotpink;border: none;color: white;padding: 5px 15px;text-align: left;font-size: 14px;} .btnS:focus{outline:none;} .btnS:after {content: "Less";float: right;margin-left: 3px;} .btnS.collapsed:after {content: "More";}

/* check this out=> https://bootsnipp.com/Winson222 */