我正在用 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>
这是发生的事情的照片。我认为很明显我想要的是列均匀地占据整个表格。图像只是表格,而不是整个网页。
最佳答案
您需要按照@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 的答案投票。如果您觉得满意,请投票给我。
看例子:
关于带列的可滚动 HTML 表格,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/34168374/