"Styled Table"
Bootstrap 2.3.2 Snippet by opencubicles

<link href="//netdna.bootstrapcdn.com/twitter-bootstrap/2.3.2/css/bootstrap-combined.min.css" rel="stylesheet" id="bootstrap-css"> <script src="//netdna.bootstrapcdn.com/twitter-bootstrap/2.3.2/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="span12"> <div class="widget stacked widget-table action-table"> <div class="widget-content"> <table class="table table-striped table-bordered"> <thead> <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 id="rating-blocks"> <button type="button" style="background-color: #4b4948 ;" class=" btn-grey btn-sm" aria-label="Left Align">   </button> <button type="button" style="background-color: #4b4948 ;" class=" btn-grey btn-sm" aria-label="Left Align">   </button> <button type="button" style="background-color: #4b4948 ;" class=" btn-grey btn-sm" aria-label="Left Align">   </button> <button type="button" style="background-color: #4b4948 ;"class=" btn-grey btn-sm" aria-label="Left Align">   </button> <button type="button" style="background-color: #D3D3D3 ;" class=" 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> <br><i class="icon-star"></i><i class="icon-star"></i><i class="icon-star"></i><i class="icon-star"></i><i class="icon-star"></i><i class="icon-star"></i><i class="icon-star"></i><br> <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-grey btn-sm" aria-label="Left Align">   </button> <button type="button" style="background-color: #4b4948 ;" class=" btn-grey btn-sm" aria-label="Left Align">   </button> <button type="button" style="background-color: #4b4948 ;" class=" btn-grey btn-sm" aria-label="Left Align">   </button> <button type="button" style="background-color: #4b4948 ;" class=" btn-grey btn-sm" aria-label="Left Align">   </button> <button type="button" style="background-color: #D3D3D3 ;" class="btn-grey btn-sm" aria-label="Left Align">   </button> </div> </td> <td data-title="Bewertungen" class="star-rating"> <span style="font-size:10px; color:#808080;">Bewertungen FR 4.8</span> <br><i class="icon-star"></i><i class="icon-star"></i><i class="icon-star"></i><i class="icon-star"></i><i class="icon-star"></i><i class="icon-star"></i><i class="icon-star"></i><br> <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-grey btn-sm" aria-label="Left Align">   </button> <button type="button" style="background-color: #4b4948 ;" class=" btn-grey btn-sm" aria-label="Left Align">   </button> <button type="button" style="background-color: #4b4948 ;" class=" btn-grey btn-sm" aria-label="Left Align">   </button> <button type="button" style="background-color: #4b4948 ;" class=" btn-grey btn-sm" aria-label="Left Align">   </button> <button type="button" style="background-color: #D3D3D3 ;" class="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> <br><i class="icon-star"></i><i class="icon-star"></i><i class="icon-star"></i><i class="icon-star"></i><i class="icon-star"></i><i class="icon-star"></i><i class="icon-star"></i><br> <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-grey btn-sm" aria-label="Left Align">   </button> <button type="button" style="background-color: #4b4948 ;" class=" btn-grey btn-sm" aria-label="Left Align">   </button> <button type="button" style="background-color: #D3D3D3 ;" class="btn-grey btn-sm" aria-label="Left Align">   </button> <button type="button" style="background-color: #D3D3D3 ;" class="btn-grey btn-sm" aria-label="Left Align">   </button> <button type="button" style="background-color: #D3D3D3 ;" class="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> <br><i class="icon-star"></i><i class="icon-star"></i><i class="icon-star"></i><i class="icon-star"></i><i class="icon-star"></i><i class="icon-star"></i><i class="icon-star"></i><br> <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-grey btn-sm" aria-label="Left Align">   </button> <button type="button" style="background-color: #4b4948 ;" class=" btn-grey btn-sm" aria-label="Left Align">   </button> <button type="button" style="background-color: #D3D3D3 ;" class="btn-grey btn-sm" aria-label="Left Align">   </button> <button type="button" style="background-color: #D3D3D3 ;" class="btn-grey btn-sm" aria-label="Left Align">   </button> <button type="button" style="background-color: #D3D3D3 ;" class="btn-grey btn-sm" aria-label="Left Align">   </button> </div></td> <td data-title="Bewertungen" class='star-rating'> <span style="font-size:10px; color:#808080;">Bewertungen FR 2.1</span> <br><i class="icon-star"></i><i class="icon-star yellow-star"></i><i class="icon-star"></i><i class="icon-star-empty"></i><i class="icon-star-empty"></i><i class="icon-star-empty"></i><i class="icon-star-empty"></i><br> <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> <!-- /widget-content --> </div> <!-- /widget --> </div>
.icon-star { color:yellow; }

Related: See More


Questions / Comments: