$  ('table').on('click', 'tr', function () {     if ($  (this).hasClass('table-info')) {         $  (this).removeClass('table-info');     }     else {     $  ('tr.table-info').removeClass('table-info');         $  (this).addClass('table-info');     } });

.container-table {   display: table; }  .container-table-row {   display: table-row; }  .container-table-cell {   display: table-cell; }

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> <link href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0-beta.2/css/bootstrap.min.css" rel="stylesheet"/>  <div class="container-table">   <div class="container-table-row">     <div class="container-table-cell">       <table class="table table-responsive">         <thead>           <tr>             <th>#</th>             <th>Primeira coluna</th>             <th>Segunda coluna</th>             <th>Table heading</th>             <th>Table heading</th>             <th>Table heading</th>             <th>Table heading</th>           </tr>         </thead>         <tbody>           <tr>             <th scope="row">1</th>             <td>Table cell</td>             <td>Table cell</td>             <td>Table cell</td>             <td>Table cell</td>             <td>Table cell</td>             <td>Table cell</td>           </tr>           <tr>             <th scope="row">2</th>             <td>Table cell</td>             <td>Table cell</td>             <td>Table cell</td>             <td>Table cell</td>             <td>Table cell</td>             <td>Table cell</td>           </tr>           <tr>             <th scope="row">3</th>             <td>Table cell</td>             <td>Table cell</td>             <td>Table cell</td>             <td>Table cell</td>             <td>Table cell</td>             <td>Table cell</td>           </tr>         </tbody>       </table>     </div>   </div> </div>