<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="container"> <div class="row"> <div class="col-md-12"> <h2 class="text-center"> </h2> </div> <div id="no-more-tables"> <table class="col-sm-12 table-bordered table-striped table-condensed cf"> <thead class="cf"> <tr> <th> </th> <th>Produkt</th> <th>Annahmequote</th> <th>Bewertungen</th> <th>Versicherung</th> <th>eff. jahreszins</th> <th>Monatsrate ab:</th> </tr> </thead> <tbody> <tr> <td data-title=""><img src="https://www.cashgate.ch/media/images/logo960.png" style="width:100px;height:60px; margin-left:40px;"/></td> <td data-title="Produkt">cashgate Credit</td> <td data-title="Annahmequote"> <div class="rating-block"> <button type="button" style="background-color: #4b4948 ;" class="btn btn-default btn-grey btn-sm" aria-label="Left Align">   </button> <button type="button" style="background-color: #4b4948 ;" class="btn btn-default btn-grey btn-sm" aria-label="Left Align">   </button> <button type="button" style="background-color: #4b4948 ;" class="btn btn-default btn-grey btn-sm" aria-label="Left Align">   </button> <button type="button" style="background-color: #4b4948 ;" class="btn btn-default btn-grey btn-sm" aria-label="Left Align">   </button> <button type="button" style="background-color: #D3D3D3 ;" class="btn btn-default btn-grey btn-sm" aria-label="Left Align">   </button> </div> </td> <td data-title="Bewertungen"> <span style="font-size:10px; color:#808080;">Bewertungen FR 4.8</span> <p style=" margin-bottom: 0cm;"><span style="color:#f2b01e;" class="glyphicon glyphicon-star" aria-hidden="true"></span> <span style="color:#f2b01e;" class="glyphicon glyphicon-star" aria-hidden="true"></span> <span style="color:#f2b01e;" class="glyphicon glyphicon-star" aria-hidden="true"></span> <span style="color:#f2b01e;" class="glyphicon glyphicon-star" aria-hidden="true"></span> <span style="color:#f2b01e;" class="glyphicon glyphicon-star" aria-hidden="true"></span>  <span style="color:#f2b01e;" class="glyphicon glyphicon-star" aria-hidden="true"></span> <span style="color:#f2b01e;" class="glyphicon glyphicon-star" aria-hidden="true"></span> </p> <span style="font-size:10px; color:#808080;">(10) kommentare ansehen</span> </td> <td data-title="Versicherung">optional</td> <td data-title="eff. jahreszins">ab 4.9%, 7.9% und 9.9%</td> <td data-title="Monatsrate ab:">502.47 CHF</td> <td data-title="Monatsrate ab:"><a href="#" class="btn btn-sm btn-primary">Online Antrag</a></td> </tr> <tr> <td data-title=""><img src="http://pictures.attention-ngn.com/portal/155/377204/products/1454412529.0041_6_o.jpg" style="width:100px;height:60px; margin-left:40px;"/></td> <td data-title="Produkt">CREDIT‑now Classic</td> <td data-title="Annahmequote"> <div class="rating-block"> <button type="button" style="background-color: #4b4948 ;" class="btn btn-default btn-grey btn-sm" aria-label="Left Align">   </button> <button type="button" style="background-color: #4b4948 ;" class="btn btn-default btn-grey btn-sm" aria-label="Left Align">   </button> <button type="button" style="background-color: #4b4948 ;" class="btn btn-default btn-grey btn-sm" aria-label="Left Align">   </button> <button type="button" style="background-color: #4b4948 ;" class="btn btn-default btn-grey btn-sm" aria-label="Left Align">   </button> <button type="button" style="background-color: #D3D3D3 ;" class="btn btn-default btn-grey btn-sm" aria-label="Left Align">   </button> </div> </td> <td data-title="Bewertungen"> <span style="font-size:10px; color:#808080;">Bewertungen FR 4.8</span> <p style=" margin-bottom: 0cm;"><span style="color:#f2b01e;" class="glyphicon glyphicon-star" aria-hidden="true"></span> <span style="color:#f2b01e;" class="glyphicon glyphicon-star" aria-hidden="true"></span> <span style="color:#f2b01e;" class="glyphicon glyphicon-star" aria-hidden="true"></span> <span style="color:#f2b01e;" class="glyphicon glyphicon-star" aria-hidden="true"></span> <span style="color:#f2b01e;" class="glyphicon glyphicon-star" aria-hidden="true"></span>  <span style="color:#f2b01e;" class="glyphicon glyphicon-star" aria-hidden="true"></span> <span style="color:#f2b01e;" class="glyphicon glyphicon-star" aria-hidden="true"></span> </p> <span style="font-size:10px; color:#808080;">(7) kommentare ansehen</span> </td> <td data-title="Versicherung">optional</td> <td data-title="eff. jahreszins">ab 8.9%</td> <td data-title="Monatsrate ab:">513.59 CHF</td> <td data-title="Monatsrate ab:"><a href="#" class="btn btn-sm btn-primary">Online Antrag</a></td> </tr> <tr> <td data-title=""><img src="https://www.cembra.ch/~/media/images/logo/cembra-logo.png?h=140&la=de&w=140" style="width:100px;height:60px; margin-left:40px;"/></td> <td data-title="Produkt">Cembra Barkredit</td> <td data-title="Annahmequote"> <div class="rating-block"> <button type="button" style="background-color: #4b4948 ;" class="btn btn-default btn-grey btn-sm" aria-label="Left Align">   </button> <button type="button" style="background-color: #4b4948 ;" class="btn btn-default btn-grey btn-sm" aria-label="Left Align">   </button> <button type="button" style="background-color: #4b4948 ;" class="btn btn-default btn-grey btn-sm" aria-label="Left Align">   </button> <button type="button" style="background-color: #4b4948 ;" class="btn btn-default btn-grey btn-sm" aria-label="Left Align">   </button> <button type="button" style="background-color: #D3D3D3 ;" class="btn btn-default btn-grey btn-sm" aria-label="Left Align">   </button> </div> </td> <td data-title="Bewertungen"> <span style="font-size:10px; color:#808080;">Bewertungen FR 4.8</span> <p style=" margin-bottom: 0cm;"><span style="color:#f2b01e;" class="glyphicon glyphicon-star" aria-hidden="true"></span> <span style="color:#f2b01e;" class="glyphicon glyphicon-star" aria-hidden="true"></span> <span style="color:#f2b01e;" class="glyphicon glyphicon-star" aria-hidden="true"></span> <span style="color:#f2b01e;" class="glyphicon glyphicon-star" aria-hidden="true"></span> <span style="color:#f2b01e;" class="glyphicon glyphicon-star" aria-hidden="true"></span>  <span style="color:#f2b01e;" class="glyphicon glyphicon-star" aria-hidden="true"></span> <span style="color:#f2b01e;" class="glyphicon glyphicon-star" aria-hidden="true"></span> </p> <span style="font-size:10px; color:#808080;">(6) kommentare ansehen</span> </td> <td data-title="Versicherung">optional</td> <td data-title="eff. jahreszins">ab 9.9%</td> <td data-title="Monatsrate ab:">524.77 CHF</td> <td data-title="Monatsrate ab:"><a href="#" class="btn btn-sm btn-primary">Online Antrag</a></td> </tr> <tr> <td data-title=""><img src="https://www.money-net.ch/-/media/money-net/framework/img-logo-money-net.png?h=54&la=de&vs=1&w=183&hash=E196CDA566F9FC424D7F87864D86CB76816CC2F1" style="width:100px;height:60px; margin-left:40px;"/></td> <td data-title="Produkt">Money-net Privatdarlehen</td> <td data-title="Annahmequote"> <div class="rating-block"> <button type="button" style="background-color: #4b4948 ;" class="btn btn-default btn-grey btn-sm" aria-label="Left Align">   </button> <button type="button" style="background-color: #4b4948 ;" class="btn btn-default btn-grey btn-sm" aria-label="Left Align">   </button> <button type="button" style="background-color: #D3D3D3 ;" class="btn btn-default btn-grey btn-sm" aria-label="Left Align">   </button> <button type="button" style="background-color: #D3D3D3 ;" class="btn btn-default btn-grey btn-sm" aria-label="Left Align">   </button> <button type="button" style="background-color: #D3D3D3 ;" class="btn btn-default btn-grey btn-sm" aria-label="Left Align">   </button> </div> </td> <td data-title="Bewertungen"> <span style="font-size:10px; color:#808080;">Bewertungen FR 3</span> <p style=" margin-bottom: 0cm;"> <span style="color:#f2b01e;" class="glyphicon glyphicon-star" aria-hidden="true"></span> <span style="color:#f2b01e;" class="glyphicon glyphicon-star" aria-hidden="true"></span> <span style="color:#f2b01e;" class="glyphicon glyphicon-star" aria-hidden="true"></span> <span style="color:#f2b01e;" class="glyphicon glyphicon-star" aria-hidden="true"></span> <span style="color:#D3D3D3;" class="glyphicon glyphicon-star" aria-hidden="true"></span>  <span style="color:#D3D3D3;" class="glyphicon glyphicon-star" aria-hidden="true"></span> <span style="color: #D3D3D3;" class="glyphicon glyphicon-star" aria-hidden="true"></span> </p> <span style="font-size:10px; color:#808080;">(2) kommentare ansehen</span> </td> <td data-title="Versicherung">nein</td> <td data-title="eff. jahreszins">ab 5.8%</td> <td data-title="Monatsrate ab:">479.28 CHF</td> <td data-title="Monatsrate ab:"><a href="#" class="btn btn-sm btn-primary">Infos</a></td> </tr> <tr> <td data-title=""><img src="https://upload.wikimedia.org/wikipedia/commons/thumb/c/cc/Migros-Bank-Logo.svg/2000px-Migros-Bank-Logo.svg.png" style="width:100px;height:60px; margin-left:40px;"/></td> <td data-title="Produkt">Migros Privatkredit Filiale</td> <td data-title="Annahmequote"> <div class="rating-block"> <button type="button" style="background-color: #4b4948 ;" class="btn btn-default btn-grey btn-sm" aria-label="Left Align">   </button> <button type="button" style="background-color: #4b4948 ;" class="btn btn-default btn-grey btn-sm" aria-label="Left Align">   </button> <button type="button" style="background-color: #D3D3D3 ;" class="btn btn-default btn-grey btn-sm" aria-label="Left Align">   </button> <button type="button" style="background-color: #D3D3D3 ;" class="btn btn-default btn-grey btn-sm" aria-label="Left Align">   </button> <button type="button" style="background-color: #D3D3D3 ;" class="btn btn-default btn-grey btn-sm" aria-label="Left Align">   </button> </div></td> <td data-title="Bewertungen"> <span style="font-size:10px; color:#808080;">Bewertungen FR 2.1</span> <p style=" margin-bottom: 0cm;"><span style="color:#f2b01e;" class="glyphicon glyphicon-star" aria-hidden="true"></span> <span style="color:#f2b01e;" class="glyphicon glyphicon-star" aria-hidden="true"></span> <span style="color:#f2b01e;" class="glyphicon glyphicon-star" aria-hidden="true"></span> <span style="color:#D3D3D3;" class="glyphicon glyphicon-star" aria-hidden="true"></span> <span style="color:#D3D3D3;" class="glyphicon glyphicon-star" aria-hidden="true"></span>  <span style="color:#D3D3D3;" class="glyphicon glyphicon-star" aria-hidden="true"></span> <span style="color: #D3D3D3;" class="glyphicon glyphicon-star" aria-hidden="true"></span> </p> <span style="font-size:10px; color:#808080;">(6) kommentare ansehen</span> </td> <td data-title="Versicherung">nein</td> <td data-title="eff. jahreszins">7.9%</td> <td data-title="Monatsrate ab:">502.47 CHF</td> <td data-title="Monatsrate ab:"><a href="#" class="btn btn-sm btn-primary">Infos</a></td> </tr> </tbody> </table> </div> </div> </div>

@media only screen and (max-width: 800px) { /* Force table to not be like tables anymore */ #no-more-tables table, #no-more-tables thead, #no-more-tables tbody, #no-more-tables th, #no-more-tables td, #no-more-tables tr { display: block; } /* Hide table headers (but not display: none;, for accessibility) */ #no-more-tables thead tr { position: absolute; top: -9999px; left: -9999px; } #no-more-tables tr { border: 1px solid #ccc; } #no-more-tables td { /* Behave like a "row" */ border: none; border-bottom: 1px solid #eee; position: relative; padding-left: 50%; white-space: normal; text-align:left; } #no-more-tables td:before { /* Now like a table header */ position: absolute; /* Top/left values mimic padding */ top: 6px; left: 6px; width: 45%; padding-right: 10px; white-space: nowrap; text-align:left; font-weight: bold; } /* Label the data */ #no-more-tables td:before { content: attr(data-title); } }