Question

我在html中创建一个表，它需要可滚动。所以我将显示更改为阻止并进行溢出滚动。当我这样做时，它使列标题没有间隔，因此有很多多余的空间。我知道显示块设置是导致这种情况的原因，但我需要让它可滚动。如何在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/

Answer 2

将表放在具有您的表现在具有的设置的DIV中（即高度和溢出），并让表格成为表格......

HTML表可滚动列

2 个答案: