bootstrap table отзывчивая голова фиксированный корпус прокручиваемый

Question

Я использую bootstrap 3, чтобы сделать мой сайт отзывчивым, и у меня есть таблица с div, которая является «отзывчивой». Я хочу таблицу, которая позволяет мне прокручивать вертикально, когда экран мал, но он также должен прокручиваться по горизонтали, потому что у них более 50 элементов в таблице. Как заставить таблицу прокручиваться и реагировать?

Я пытаюсь это CSS, но таблица растет и не горизонтальной прокрутки ...

application.css.scss 

    //table becomes responsive with scrollbar 
    .table-responsive { 
    width: 100%; 
    height: 200px !important; 
    overflow: auto; 
    -webkit-overflow-scrolling: touch; 
    -ms-overflow-style: -ms-autohiding-scrollbar; 
    border: 1px solid #DDD; 
    } 

Приведенные выше CSS работает, но голова должна быть установлена ​​выше прокруткой тела.

html 

<div class= "container"> 
<div class="table-responsive"> 
    <table class="table table-colored table-hover table-bordered"> 
    <thead> 
    <tr> 
     <th width="20%">Applicant's Name</th> 
     <th width="20%">Applicant's Email</th> 
     <th width="20%">Date Requested </th> 
     <th width="40%">Report View/Download</th> 
    </tr> 
    </thead> 
    <tbody> 
     <% current_manager.reportapprovals.each do |ra| %> 
      <% if ra.report.present? %> 
       <tr> 
       <td width="20%"><%= ra.tenant_last_name.truncate(17) %></td> 
       <td width="20%"><%= ra.tenant_email.truncate(17) %></td> 
       <td width="20%"><%= ra.date_approved %></td> 
       </tr> 
      <% end %> 
     <% end %> 
     </div> 
     <% end %> 
    </tbody> 
</div> 
</table> 

Answer 1

Вы можете изменить CSS, как это, чтобы получить вертикальную и горизонтальную полосы прокрутки

.table-responsive { 
    width: 100%; 
    height: 100%; 
    margin-bottom: 15px; 
    overflow-x: auto; 
    overflow-y: auto; 
    display: block; 
    -webkit-overflow-scrolling: touch; 
    -ms-overflow-style: -ms-autohiding-scrollbar; 
    border: 1px solid #DDD; 
} 

https://jsfiddle.net/xx8j9tLt/

Update

с фиксированным заголовком

CSS

.container { 
    width:400px; 
    height: 100px; 
} 
.table-responsive { 
    width: 100%; 
    height: 100%; 
    margin-bottom: 15px; 
    overflow-x: auto; 
    overflow-y: auto; 
    display: block; 
    -webkit-overflow-scrolling: touch; 
    -ms-overflow-style: -ms-autohiding-scrollbar; 
    border: 1px solid #DDD; 
    position: relative; 
} 

table thead { 
    position: fixed; 
    width: auto; 
    overflow: auto; 
} 

JS (с JQuery)

function setThead() { 
    var tableWidth = $('.table-responsive').width(); 
    $('.table-responsive thead').css('width',tableWidth); 
}; 
setThead(); 
window.onresize = setThead; 

https://jsfiddle.net/xx8j9tLt/1/