<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-2 padding-0 text-center border-left" id="main-left-column"> <table style="width:100%"> <tr class="bg-primary border-right-bottom"> <td colspan="1"> <h2>Lokalizacja</h2> </td> </tr> <tr class="border-right-bottom"> <td> <div class="container-fluid"> <div class="row"> <div class="col-xs-12 bg-info"> Warszawa </div> </div> </div> </td> </tr> <tr class="border-right-bottom"> <td> <div class="container-fluid"> <div class="row"> <div class="col-xs-2 padding-0 bg-gray"> <strong>≥</strong> </div> <div class="col-xs-4 padding-0"> 1 </div> <div class="col-xs-2 padding-0 bg-gray"> <strong><</strong> </div> <div class="col-xs-4 padding-0"> 2 </div> </div> <div class="row"> <div class="col-xs-2 padding-0 bg-gray"> <strong>≥</strong> </div> <div class="col-xs-4 padding-0"> 2 </div> <div class="col-xs-2 padding-0 bg-gray"> <strong><</strong> </div> <div class="col-xs-4 padding-0"> 3 </div> </div> <div class="row"> <div class="col-xs-2 padding-0 bg-gray"> <strong>≥</strong> </div> <div class="col-xs-4 padding-0"> 3 </div> <div class="col-xs-2 padding-0 bg-gray"> <strong><</strong> </div> <div class="col-xs-4 padding-0"> 4 </div> </div> <div class="row"> <div class="col-xs-2 padding-0 bg-gray"> <strong>≥</strong> </div> <div class="col-xs-4 padding-0"> 4 </div> <div class="col-xs-2 padding-0 bg-gray"> <strong><</strong> </div> <div class="col-xs-4 padding-0"> 5 </div> </div> <div class="row"> <div class="col-xs-2 padding-0 bg-gray"> <strong>≥</strong> </div> <div class="col-xs-4 padding-0"> 5 </div> <div class="col-xs-2 padding-0 bg-gray"> <strong>></strong> </div> <div class="col-xs-4 padding-0"> ∞ </div> </div> </div> </td> </tr> </table> </div> <div class="col-md-10" id="main-right-column"> <table> <tbody> <tr> <td class="text-center padding-0"> <table> <tr class="text-center bg-primary border-right-bottom"> <td colspan="1"> <h2>Liczba pokoi</h2> </td> </tr> <tr class="bg-info"> <td class="width-300-450 border-right-bottom"> <div class="container-fluid"> <div class="row"> <div class="col-xs-6"> oferty / inw. </div> <div class="col-xs-2 padding-0" style="color: #888"> </div> <div class="col-xs-4 padding-0"> % r / r </div> </div> </div> </td> </tr> <tr> <td class="width-300-450 border-right-bottom"> <div class="container-fluid"> <div class="row"> <div class="col-xs-3 padding-0"> 7346 </div> <div class="col-xs-3 padding-0"> 123 </div> <div class="col-xs-2 padding-0"> <i class="glyphicon glyphicon-eye-open"></i> </div> <div class="col-xs-2 bg-success padding-0"> +12% </div> <div class="col-xs-2 bg-danger padding-0"> -84% </div> </div> <div class="row"> <div class="col-xs-3 padding-0"> 7346 </div> <div class="col-xs-3 padding-0"> 123 </div> <div class="col-xs-2 padding-0"> <i class="glyphicon glyphicon-eye-open"></i> </div> <div class="col-xs-2 bg-success padding-0"> +12% </div> <div class="col-xs-2 bg-danger padding-0"> -84% </div> </div> <div class="row"> <div class="col-xs-3 padding-0"> 7346 </div> <div class="col-xs-3 padding-0"> 123 </div> <div class="col-xs-2 padding-0"> <i class="glyphicon glyphicon-eye-open"></i> </div> <div class="col-xs-2 bg-success padding-0"> +12% </div> <div class="col-xs-2 bg-danger padding-0"> -84% </div> </div> <div class="row"> <div class="col-xs-3 padding-0"> 7346 </div> <div class="col-xs-3 padding-0"> 123 </div> <div class="col-xs-2 padding-0"> <i class="glyphicon glyphicon-eye-open"></i> </div> <div class="col-xs-2 bg-success padding-0"> +12% </div> <div class="col-xs-2 bg-danger padding-0"> -84% </div> </div> <div class="row"> <div class="col-xs-3 padding-0"> 7346 </div> <div class="col-xs-3 padding-0"> 123 </div> <div class="col-xs-2 padding-0"> <i class="glyphicon glyphicon-eye-open"></i> </div> <div class="col-xs-2 bg-success padding-0"> +12% </div> <div class="col-xs-2 bg-danger padding-0"> -84% </div> </div> </div> </td> </tr> </table> </td> <td class="text-center padding-0"> <table> <tr class="text-center bg-primary border-right-bottom"> <td colspan="3"> <h2>Cena nominalna</h2> </td> </tr> <tr class="bg-info"> <td class="width-300-450 border-right-bottom"> <div class="container-fluid"> <div class="row"> <div class="col-xs-3"> <div class="row"> <div class="col-xs-4 padding-0 bg-gray"> <strong>≥</strong> </div> <div class="col-xs-8 padding-0"> 100000 </div> </div> </div> <div class="col-xs-3"> <div class="row"> <div class="col-xs-4 padding-0 bg-gray"> <strong><</strong> </div> <div class="col-xs-8 padding-0"> 200000 </div> </div> </div> <div class="col-xs-2 padding-0"> <i class="glyphicon glyphicon-plus"></i> </div> <div class="col-xs-4 padding-0"> % r / r </div> </div> </div> </td> <td class="width-300-450 border-right-bottom"> <div class="container-fluid"> <div class="row"> <div class="col-xs-3"> <div class="row"> <div class="col-xs-4 padding-0 bg-gray"> <strong>≥</strong> </div> <div class="col-xs-8 padding-0"> 100000 </div> </div> </div> <div class="col-xs-3"> <div class="row"> <div class="col-xs-4 padding-0 bg-gray"> <strong><</strong> </div> <div class="col-xs-8 padding-0"> 200000 </div> </div> </div> <div class="col-xs-2 padding-0"> <i class="glyphicon glyphicon-plus"></i> </div> <div class="col-xs-4 padding-0"> % r / r </div> </div> </div> </td> <td class="width-300-450 border-right-bottom"> <div class="container-fluid"> <div class="row"> <div class="col-xs-3"> <div class="row"> <div class="col-xs-4 padding-0 bg-gray"> <strong>≥</strong> </div> <div class="col-xs-8 padding-0"> 100000 </div> </div> </div> <div class="col-xs-3"> <div class="row"> <div class="col-xs-4 padding-0 bg-gray"> <strong><</strong> </div> <div class="col-xs-8 padding-0"> 200000 </div> </div> </div> <div class="col-xs-2 padding-0"> <i class="glyphicon glyphicon-plus"></i> </div> <div class="col-xs-4 padding-0"> % r / r </div> </div> </div> </td> </tr> <tr> <td class="width-300-450 border-right-bottom"> <div class="container-fluid"> <div class="row"> <div class="col-xs-3 padding-0"> 7346 </div> <div class="col-xs-3 padding-0"> 123 </div> <div class="col-xs-2 padding-0"> <i class="glyphicon glyphicon-eye-open"></i> </div> <div class="col-xs-2 bg-success padding-0"> +12% </div> <div class="col-xs-2 bg-danger padding-0"> -84% </div> </div> <div class="row"> <div class="col-xs-3 padding-0"> 7346 </div> <div class="col-xs-3 padding-0"> 123 </div> <div class="col-xs-2 padding-0"> <i class="glyphicon glyphicon-eye-open"></i> </div> <div class="col-xs-2 bg-success padding-0"> +12% </div> <div class="col-xs-2 bg-danger padding-0"> -84% </div> </div> <div class="row"> <div class="col-xs-3 padding-0"> 7346 </div> <div class="col-xs-3 padding-0"> 123 </div> <div class="col-xs-2 padding-0"> <i class="glyphicon glyphicon-eye-open"></i> </div> <div class="col-xs-2 bg-success padding-0"> +12% </div> <div class="col-xs-2 bg-danger padding-0"> -84% </div> </div> <div class="row"> <div class="col-xs-3 padding-0"> 7346 </div> <div class="col-xs-3 padding-0"> 123 </div> <div class="col-xs-2 padding-0"> <i class="glyphicon glyphicon-eye-open"></i> </div> <div class="col-xs-2 bg-success padding-0"> +12% </div> <div class="col-xs-2 bg-danger padding-0"> -84% </div> </div> <div class="row"> <div class="col-xs-3 padding-0"> 7346 </div> <div class="col-xs-3 padding-0"> 123 </div> <div class="col-xs-2 padding-0"> <i class="glyphicon glyphicon-eye-open"></i> </div> <div class="col-xs-2 bg-success padding-0"> +12% </div> <div class="col-xs-2 bg-danger padding-0"> -84% </div> </div> </div> </td> <td class="width-300-450 border-right-bottom"> <div class="container-fluid"> <div class="row"> <div class="col-xs-3 padding-0"> 7346 </div> <div class="col-xs-3 padding-0"> 123 </div> <div class="col-xs-2 padding-0"> <i class="glyphicon glyphicon-eye-open"></i> </div> <div class="col-xs-2 bg-success padding-0"> +12% </div> <div class="col-xs-2 bg-danger padding-0"> -84% </div> </div> <div class="row"> <div class="col-xs-3 padding-0"> 7346 </div> <div class="col-xs-3 padding-0"> 123 </div> <div class="col-xs-2 padding-0"> <i class="glyphicon glyphicon-eye-open"></i> </div> <div class="col-xs-2 bg-success padding-0"> +12% </div> <div class="col-xs-2 bg-danger padding-0"> -84% </div> </div> <div class="row"> <div class="col-xs-3 padding-0"> 7346 </div> <div class="col-xs-3 padding-0"> 123 </div> <div class="col-xs-2 padding-0"> <i class="glyphicon glyphicon-eye-open"></i> </div> <div class="col-xs-2 bg-success padding-0"> +12% </div> <div class="col-xs-2 bg-danger padding-0"> -84% </div> </div> <div class="row"> <div class="col-xs-3 padding-0"> 7346 </div> <div class="col-xs-3 padding-0"> 123 </div> <div class="col-xs-2 padding-0"> <i class="glyphicon glyphicon-eye-open"></i> </div> <div class="col-xs-2 bg-success padding-0"> +12% </div> <div class="col-xs-2 bg-danger padding-0"> -84% </div> </div> <div class="row"> <div class="col-xs-3 padding-0"> 7346 </div> <div class="col-xs-3 padding-0"> 123 </div> <div class="col-xs-2 padding-0"> <i class="glyphicon glyphicon-eye-open"></i> </div> <div class="col-xs-2 bg-success padding-0"> +12% </div> <div class="col-xs-2 bg-danger padding-0"> -84% </div> </div> </div> </td><td class="width-300-450 border-right-bottom"> <div class="container-fluid"> <div class="row"> <div class="col-xs-3 padding-0"> 7346 </div> <div class="col-xs-3 padding-0"> 123 </div> <div class="col-xs-2 padding-0"> <i class="glyphicon glyphicon-eye-open"></i> </div> <div class="col-xs-2 bg-success padding-0"> +12% </div> <div class="col-xs-2 bg-danger padding-0"> -84% </div> </div> <div class="row"> <div class="col-xs-3 padding-0"> 7346 </div> <div class="col-xs-3 padding-0"> 123 </div> <div class="col-xs-2 padding-0"> <i class="glyphicon glyphicon-eye-open"></i> </div> <div class="col-xs-2 bg-success padding-0"> +12% </div> <div class="col-xs-2 bg-danger padding-0"> -84% </div> </div> <div class="row"> <div class="col-xs-3 padding-0"> 7346 </div> <div class="col-xs-3 padding-0"> 123 </div> <div class="col-xs-2 padding-0"> <i class="glyphicon glyphicon-eye-open"></i> </div> <div class="col-xs-2 bg-success padding-0"> +12% </div> <div class="col-xs-2 bg-danger padding-0"> -84% </div> </div> <div class="row"> <div class="col-xs-3 padding-0"> 7346 </div> <div class="col-xs-3 padding-0"> 123 </div> <div class="col-xs-2 padding-0"> <i class="glyphicon glyphicon-eye-open"></i> </div> <div class="col-xs-2 bg-success padding-0"> +12% </div> <div class="col-xs-2 bg-danger padding-0"> -84% </div> </div> <div class="row"> <div class="col-xs-3 padding-0"> 7346 </div> <div class="col-xs-3 padding-0"> 123 </div> <div class="col-xs-2 padding-0"> <i class="glyphicon glyphicon-eye-open"></i> </div> <div class="col-xs-2 bg-success padding-0"> +12% </div> <div class="col-xs-2 bg-danger padding-0"> -84% </div> </div> </div> </td> </tr> </table> </td> </tr> </tbody> </table> </div> </div> </div>

/* CSS used here will be applied after bootstrap.css */ #main-right-column { overflow-x: auto; display: inline-block; padding:0; padding-left:0px; } .width-300-450 { min-width:300px; width: 100%; max-width:450px } .padding-0 { padding-left:0 !important; padding-right:0 !important; } #main-right-colum div { border: 1px solid #000; } .bg-gray { background-color: #eee; } .border-right-bottom { border-right: 1px solid #000; border-bottom: 1px solid #000; } .border-top-left { border-top: 1px solid #000; border-left: 1px solid #000; } .border-left { border-left: 1px solid #000; }