Question

我正在使用bootstrap 3来使我的网站响应，我有一个表格，其中包含表格响应＆＃34;表格响应＆＃34;。我想要一个允许我在屏幕较小的情况下垂直滚动的表格，但它也需要水平滚动，因为它们在表格中超过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/

<强>更新

使用固定标题

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/

引导表响应头固定体可滚动

1 个答案: