Блог

Я использую 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>
 

Вы можете изменить 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/

Обновить

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

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/