1.效果图如下:
2.jsp代码:注意:table样式用的bootstrap样式
<table class="table table-bordered" >
<thead >
<tr>
<td style="width:19.57%">月份</td>
<td style="width:24.25%">新关注人数</td>
<td style="width:31%">取消关注人数</td>
<td>净增关注人数</td>
</tr>
</thead>
</table>
<div style="height:212px;max-height:212px;overflow-y:scroll;margin-top:-22px">
<table class="table table-bordered">
<tbody>
<c:if test="${empty List}">
<tr>
<td rowspan="4" style="color:red">该时间段数据不存在</td>
</tr>
</c:if>
<c:if test="${not empty List}">
<c:forEach items="${List}" var="info">
<tr>
<td style="width:19.57%">${info.Year_Month}</td>
<td style="width:24.25%">${info.FocusCount}</td>
<td style="width:31%">${info.CancelCount}</td>
<td>${info.FocusCount-info.CancelCount }</td>
</tr>
</c:forEach>
</c:if>
</tbody>
</table>
</div>
备注:用两个table,第一个table放表头信息,第二个table放表格数据,第二个table放在一个div中是为了添加滚动效果
3.表格数据居中显示样式和滚动效果去掉滚动条样式
css:
<style>
.table th, .table td {
text-align: center;
vertical-align: middle!important;
height:35px;
}
::-webkit-scrollbar {
display: none;
}
</style>
4.结束了,简单吧
感兴趣的小伙伴可以扫码关注下公众号哦,公众号会分享高质量的技术文章哦