<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="panel panel-default"> <div class="panel-heading"> <h3>Результаты</h3> </div> <div class="thead"> <div class="row tr"> <div class="col-sm-2 col-xs-2 td"> ID </div> <div class="col-sm-2 col-xs-2 td"> DATE </div> <div class="col-sm-2 col-xs-2 td status"> STATUS </div> <div class="col-sm-6 col-xs-6 td"> COMMENT </div> </div> </div> <div class="table-responsive"> <div class="tbody"> <div class="row tr click-cursor"> <div class="col-sm-2 td"> 17030741094334 </div> <div class="col-sm-2 td"> DD.MM.YYYY </div> <div class="col-sm-2 td status"> <label>Готов</label> </div> <div class="col-sm-6 td"> COMMENT </div> </div> <div class="row tr click-cursor"> <div class="col-sm-2 td"> 17030741094334 </div> <div class="col-sm-2 td"> DD.MM.YYYY </div> <div class="col-sm-2 td status"> <label>Готов частично</label> </div> <div class="col-sm-6 td"> COMMENT </div> </div> <div class="row tr click-cursor"> <div class="col-sm-2 td"> 17030741094334 </div> <div class="col-sm-2 td"> DD.MM.YYYY </div> <div class="col-sm-2 td status"> <label>Не готов</label> </div> <div class="col-sm-6 td"> COMMENT </div> </div> <div class="row tr click-cursor"> <div class="col-sm-2 td"> 17030741094334 </div> <div class="col-sm-2 td"> DD.MM.YYYY </div> <div class="col-sm-2 td status"> <label>Аннулирован</label> </div> <div class="col-sm-6 td"> COMMENT </div> </div> <div class="row tr click-cursor"> <div class="col-sm-2 td"> 17030741094334 </div> <div class="col-sm-2 td"> DD.MM.YYYY </div> <div class="col-sm-2 td status"> <label>L STATUS</label> </div> <div class="col-sm-6 td"> COMMENT </div> </div> <div class="row tr click-cursor"> <div class="col-sm-2 td"> 17030741094334 </div> <div class="col-sm-2 td"> DD.MM.YYYY </div> <div class="col-sm-2 td status"> <label>L STATUS</label> </div> <div class="col-sm-6 td"> COMMENT </div> </div> <div class="row tr click-cursor"> <div class="col-sm-2 td"> 17030741094334 </div> <div class="col-sm-2 td"> DD.MM.YYYY </div> <div class="col-sm-2 td status"> <label>L STATUS</label> </div> <div class="col-sm-6 td"> COMMENT </div> </div> <div class="row tr click-cursor"> <div class="col-sm-2 td"> 17030741094334 </div> <div class="col-sm-2 td"> DD.MM.YYYY </div> <div class="col-sm-2 td status"> <label>L STATUS</label> </div> <div class="col-sm-6 td"> COMMENT </div> </div> <div class="row tr click-cursor"> <div class="col-sm-2 td"> 17030741094334 </div> <div class="col-sm-2 td"> DD.MM.YYYY </div> <div class="col-sm-2 td status"> <label>L STATUS</label> </div> <div class="col-sm-6 td"> COMMENT </div> </div> </div> </div> <div class="panel-footer"> <span>Найдено столько то позиций</span> </div> </div> </div>

.tbody>.tr:nth-of-type(odd) { background-color: #f9f9f9; } .panel .td[class*=col-]{ padding-right: 0; padding-left: 0; } .tbody>.tr, .thead>.tr{ margin: 0 auto; } .tbody>.tr.active-row{ background-color: #dcd4d4; } .tbody>.tr>.td>label { display: inline-block; max-width: 100%; background-color:red; padding: 4px 10px; margin-bottom: 0; border-radius:3px; } .click-cursor { cursor: pointer; } @media (min-width: 992px){ .thead>.tr{ padding-right:2%; } .panel>.table-responsive{ height: 200px; } } @media (min-width: 767px){ .tbody>.tr>.td, .thead>.tr>.td{ padding: 6px; vertical-align: middle; line-height: 1.42857143; border-top: 1px solid #ddd; } .tbody>.tr>.td.status{ padding: 2px 6px; } .tbody>.tr>.td{ border-top: 1px solid #ddd; } .thead>.tr{ border-top: 1px solid #ddd; border-bottom: 2px solid #ddd; } .thead>.tr>.td{ font-weight: bold; } .thead>.tr>.td.status{ padding-left: 10px; } .tbody>.tr.click-cursor:hover { background-color: #dcd4d4; } } @media (min-width: 767px) and (max-width: 992px){ .thead>.tr>.long{ padding-top: 2.5%; } } @media screen and (max-width: 767px){ .table-responsive { overflow-y: auto; } .panel>.table-responsive{ height: 300px; } .thead{ display: none; } .tbody>.tr{ position: relative; border-top: 1px solid #ddd; } }