带列的可滚动 HTML 表格

Question

我正在用 html 创建一个表格，它需要可滚动。所以我将显示更改为 block 并进行溢出滚动。当我这样做时，它使列标题没有间隔，因此有很多多余的空间。我知道显示 block 设置是造成这种情况的原因，但我需要使其可滚动。我如何在 css 和 html 中设置它？

table {
  margin-bottom: 40px;
  width: 100%;
  box-shadow: 0 1px 3px rgba(0, 0, 0, 0.2);
  height: 250px !important;
  overflow-y: scroll;
  display: block;
}

  <table>
    <thead>
      <tr class="rowTable header">
        <th class="cell">Date Submitted</th>
        <th class="cell">Bounty Name</th>
        <th class="cell">Company</th>
        <th class="cell">Paid</th>
        <th class="cell">Details</th>
        <th class="cell">Response</th>
      </tr>
    </thead>
    <tbody>
      {% for report in recentReports %}
      <tr class="rowTable">
        <td class="cell">{{report.date}}</td>
        <td class="cell"><a href="/_hunter/bounty/{{report.bountyID}}">{{report.name}}</td>
        <td class="cell"><a href="/_hunter/company/{{report.accountID}}">{{report.company}}</a></td>
        <td class="cell">{{report.amountPaid}}</td>
        <td class="cell">
          <button type="button" class="detailsButton" data-toggle="modal" 
          data-target="#detailsModal" data-whatever="@getbootstrap" 
          data-ID={{report.reportID}}>
            View
          </button>
        </td>
        <td class="cell">
          <button type="button" class="messageButton" data-toggle="modal" 
            data-target="#messageModal" data-whatever="@getbootstrap" 
            data-ID={{report.reportID}}>
            View
          </button>
        </td>
      </tr> 
      {% endfor %}
    </tbody>
  </table>

这是发生的事情的照片。我认为很明显我想要的是列均匀地占据整个表格。图像只是表格，而不是整个网页。

Answer 1

您需要按照@Johannes 的建议进行操作:

<div id="wrapper">
  <!-- put your table here-->
</div> 

将您的 Css 更改为:

#wrapper {
  margin-bottom: 40px;
  width: 100%;
  box-shadow: 0 1px 3px rgba(0, 0, 0, 0.2);
  height: 250px !important;
  overflow-y: scroll;
  display: block;
}
table{
  width:100%
}

你就完成了。如果您觉得此答案有用，请为@Johannes 的答案投票。如果您觉得满意，请投票给我。

看例子:

https://jsfiddle.net/ex239ck6/