<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="//cdnjs.cloudflare.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script> <!------ Include the above in your HEAD tag ----------> <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1"> <meta name="viewport" content="width=device-width, initial-scale=1"> <link rel="stylesheet" href="http://www.watermovements.lv/p/css/tablesaw.css"> <link rel="stylesheet" href="http://www.watermovements.lv/p/demo.css"> <link rel="stylesheet" href="//filamentgroup.github.io/demo-head/demohead.css"> <script src="http://www.watermovements.lv/p/js/tablesaw.js"></script> <script src="http://www.watermovements.lv/p/js/tablesaw-init.js"></script> <script src="//filamentgroup.github.io/demo-head/loadfont.js"></script> <style> .docs-main-p th { text-align: center!important; } .docs-main-p th { border: 2px solid #cdcdcd; font-weight: bold; text-align: center !important; } .docs-main-p td { border: 1px solid #cccccc; text-align: center!important; width: 300px; } </style> <div class="docs-main-p"> <table class="table sa-table tablesaw" data-tablesaw-sortable data-tablesaw-mode="columntoggle"> <thead> <tr> <th scope="col" data-tablesaw-priority="persist"> BASIC</th> <th scope="col" data-tablesaw-sortable-col data-tablesaw-priority="3">Sessions</th> <th scope="col" data-tablesaw-sortable-col data-tablesaw-priority="3">Validation</th> <th scope="col" data-tablesaw-sortable-col data-tablesaw-priority="3">Timing</th> <th scope="col" data-tablesaw-sortable-col data-tablesaw-priority="3">Price</th> <th scope="col" data-tablesaw-sortable-col data-tablesaw-priority="3">Price per session</th> </tr> </thead> <tbody> <tr> <td><img src="http://www.watermovements.lv/wp-content/uploads/2018/03/sr-1.png"> </td> <td >1</td> <td>1 month</td> <td>30 min</td> <td>22.00</td> <td>22.00</td> </tr> <tr> <td> </td> <td>2 Introduction only </td> <td>1 month</td> <td>30 min</td> <td>30.00</td> <td>15.00</td> </tr> <tr> <td> </td> <td>1 </td> <td>1 month</td> <td>45 min</td> <td>30.00</td> <td>30.00</td> </tr> <tr> <td> </td> <td>1 14:00 – 16:00 Working week </td> <td>1 month</td> <td>30 min</td> <td>15.00</td> <td>15.00</td> </tr> <tr> <td> </td> <td>1 08:00 – 10:00 Smoothie included </td> <td>1 month</td> <td>30 min</td> <td>18.00</td> <td>18.00</td> </tr> <tr> <td> </td> <td>2 Training for 2 </td> <td>1 month</td> <td>30 min</td> <td>34.00</td> <td>17.00</td> </tr> </tbody> </table> <table class="table sa-table tablesaw" data-tablesaw-sortable data-tablesaw-mode="columntoggle"> <thead> <tr> <th scope="col" data-tablesaw-priority="persist"> PLUS</th> <th scope="col" data-tablesaw-sortable-col data-tablesaw-priority="3">Sessions</th> <th scope="col" data-tablesaw-sortable-col data-tablesaw-priority="3">Validation</th> <th scope="col" data-tablesaw-sortable-col data-tablesaw-priority="3">Timing</th> <th scope="col" data-tablesaw-sortable-col data-tablesaw-priority="3">Price</th> <th scope="col" data-tablesaw-sortable-col data-tablesaw-priority="3">Price per session</th> </tr> </thead> <tbody> <tr> <td><img src="http://www.watermovements.lv/wp-content/uploads/2018/03/1.jpg"> </td> <td >6</td> <td>2 months</td> <td>30 min</td> <td>125.00</td> <td>20.83</td> </tr> <tr> <td> </td> <td>6 10:00 – 16:00 </td> <td>2 months</td> <td>30 min</td> <td>99.00</td> <td>16.50</td> </tr> <tr> <td> </td> <td>6</td> <td>2 months</td> <td>45 min</td> <td>165.00</td> <td>27.50</td> </tr> <tr> <td> </td> <td>12 </td> <td>3 month</td> <td>30 min</td> <td>225.00</td> <td>18.75</td> </tr> <tr> <td> </td> <td>12</td> <td>3 month</td> <td>45 min</td> <td>300.00</td> <td>25</td> </tr> <tr> <td> </td> <td>8 sessions per months </br> Contract for 3 months </td> <td>1 month</td> <td>30 min</td> <td>119.99</td> <td>13.99</td> </tr> </tbody> </table> <table class="table sa-table tablesaw" data-tablesaw-sortable data-tablesaw-mode="columntoggle"> <thead> <tr> <th scope="col" data-tablesaw-priority="persist"> ELITE</th> <th scope="col" data-tablesaw-sortable-col data-tablesaw-priority="3" >Sessions</th> <th scope="col" data-tablesaw-sortable-col data-tablesaw-priority="3">Validation</th> <th scope="col" data-tablesaw-sortable-col data-tablesaw-priority="3">Timing</th> <th scope="col" data-tablesaw-sortable-col data-tablesaw-priority="3">Price</th> <th scope="col" data-tablesaw-sortable-col data-tablesaw-priority="3">Price per session</th> </tr> </thead> <tbody> <tr> <td><img src="http://www.watermovements.lv/wp-content/uploads/2018/03/2-2.jpg"> </td> <td >20</td> <td>6 months</td> <td>30 min</td> <td>340.00</td> <td>17.00</td> </tr> <tr> <td> </td> <td>30 </td> <td>6 months</td> <td>30 min/45 min</td> <td>450.00</td> <td>15.00</td> </tr> <tr> <td> </td> <td>40</td> <td>6 months</td> <td>30 min/45 min</td> <td>650.00</td> <td>14.44</td> </tr> <tr> <td> CLUB MEMBER </td> <td> </td> <td>Monthly Fee</td> <td></td> <td>60.00</td> <td> </td> </tr> <tr> <td> </td> <td>1 10:00 – 16:00 </td> <td>1 month</td> <td>30 min</td> <td>7.00</td> <td> </td> </tr> <tr> <td> </td> <td>1 Other time </td> <td>1 month</td> <td>30 min</td> <td>10.00</td> <td> </td> </tr> <tr> <td> </td> <td>1 10:00 – 16:00 </td> <td>1 month</td> <td>45 min</td> <td>10.00</td> <td> </td> </tr> <tr> <td> </td> <td>1 Other time </td> <td>1 month</td> <td>45 min</td> <td>13.00</td> <td> </td> </tr> </tbody> </table> </div>