表格数据可滑动，表头固定不动效果

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.结束了，简单吧