html - Bootstrap 表响应式头部固定主体可滚动

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 可以工作，但是 head 需要固定在滚动体之上。

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/

更新

固定标题

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/