<link href="//maxcdn.bootstrapcdn.com/bootstrap/3.3.0/css/bootstrap.min.css" rel="stylesheet" id="bootstrap-css"> <script src="//maxcdn.bootstrapcdn.com/bootstrap/3.3.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="tbl-wrapper"> </div> <table class="tbl-view"> <tbody> <tr> <td style="text-align: center; font-size: 14px;" colspan="4">Some title</td> </tr> <tr> <td style="text-align: center; background-color: #e8e8e8;"> <span style="color: #1e2a64;"><strong>Title</strong></span> </td> <td style="text-align: center; background-color: #dedcdd;"><strong> <span style="color: #1e2a64;">Title2</span></strong> </td> <td style="text-align: center; background-color: #d5d3d4;"><strong> <span style="color: #1e2a64;">Title3</span></strong> </td> <td style="text-align: center; background-color: #e0f0cb;"><strong> <span style="color: #5ca402;">Title4</span></strong> </td> </tr> <tr> <td style="text-align: center; background-color: #f5f5f5;"> <div class="circle"><strong> 1.500</strong> ^eur <br>month</div> </td> <td style="text-align: center; background-color: #efedee;"> <div class="circle"><strong>40.000</strong> ^eur <br>month</div> </td> <td style="text-align: center; background-color: #e7e5e6;"> <div class="circle"><strong> 700</strong> ^eur <br>month</div> </td> <td style="text-align: center; background-color: #f0fae2;"> <div class="circle-free"> <p class="hidden_paragraph">hidden</p> <p style="padding-left: 10px;">0 ^eur </p> </div> </td> </tr> <tr> <td style="text-align: center; background-color: #f5f5f5;"> <strong>Text</strong> <p></p> <p><span style="color: #555555;">Lorem Ipsum</span> </p> <p><span style="color: #555555;">Lorem Ipsum</span> </p> <p><span style="color: #555555;">Lorem Ipsum</span> </p> </td> <td style="text-align: center; background-color: #efedee;">  <strong>Text</strong> <p></p> <p><span style="color: #555555;">Lorem Ipsum</span> </p> <p><span style="color: #555555;"><del>Lorem Ipsum</del></span> </p> <p><span style="color: #555555;"><del>Lorem Ipsum</del></span> </p> </td> <td style="text-align: center; background-color: #e7e5e6;">  <strong>Text</strong> <p></p> <p><span style="color: #555555;"><del>Lorem Ipsum</del></span> </p> <p><span style="color: #555555;"><del>Lorem Ipsum</del></span> </p> <p><span style="color: #555555;"><del>Lorem Ipsum</del></span> </p> </td> <td style="text-align: center; background-color: #f0fae2;">  <strong>Text</strong> <p></p> <p><span style="color: #555555;"><del>Lorem Ipsum</del></span> </p> <p><span style="color: #555555;"><del>Lorem Ipsum</del></span> </p> <p><span style="color: #555555;"><del>Lorem Ipsum</del></span> </p> </td> </tr> <tr style="height: 70px;"> <td style="text-align: center; background-color: #f5f5f5; vertical-align: middle;"> <input id="kontakt_btn" type="button" value="contact"> </td> <td style="text-align: center; background-color: #efedee; vertical-align: middle;"> <input id="kontakt_btn" type="button" value="contact"> </td> <td style="text-align: center; background-color: #e7e5e6; vertical-align: middle;"> <input id="kontakt_btn" type="button" value="contact"> </td> <td style="text-align: center; background-color: #f0fae2; vertical-align: middle;"> <input id="kontakt_btn" type="button" value="contact"> </td> </tr> </tbody> </table> </div>

.tbl-wrapper { width:100%; margin: 0 auto; } .tbl-view { width: 80%; margin: 0 auto; text-align:center; } @media all and (max-width:786px){ table{ width:100%; } td{ display:block; width:100%; } tr{ display:block; margin-bottom:30px; } }