五、前端：解决表格table overflow: auto属性 固定表头，滚动表头以下内容@2019

个人说明：个人用到了table 滚动overflow想要精致的方法固定表头，便实现并记录一下

<table id="table1" class="table table-striped table-bordered table-hover" style="margin: 0px;">
    <thead>
    <tr>
    <th class="center" style="width: 10%">序号1</th>
    <th class="center" style="width: 10%">序号2</th>
    <th class="center" style="width: 80%">序号3</th>
    </tr>
</table>
***重点**：主要是style="margin: 0px;"这个属性控制的*

1.镶嵌表的内容：

 <table id="table2" class="table table-striped table-bordered table-hover" >
    <tbody>
    <c:choose>
    <c:when test="${not empty list}">
    <c:forEach items="${userlist}" var="info" varStatus="vs">
    <tr>
    <td class='center'      style="width: 10.1%">1</td>
    <td class="center"     style="width: 10%">2</td>
    <td class="center"     style="width: 78%" >3</td>
    </tr>
    </c:forEach>
    </c:when>
    <c:otherwise>
    <tr class="main_info">
    <td colspan="13" class="center">没有相关数据</td>
    </tr>
    </c:otherwise>
    </c:choose>
    </tbody>
    </table>

2.镶嵌放在另外一个页面的内容:

<div id="tableMater" style="margin-top:-5px;max-height: 278px; overflow: auto; box-sizing: border-box;"><jsp:include page="table1.jsp"></jsp:include></div>

table1.jsp内容：

<table id="table2" class="table table-striped table-bordered table-hover" >
        <tbody>
        <c:choose>
        <c:when test="${not empty list}">
        <c:forEach items="${userlist}" var="info" varStatus="vs">
        <tr>
        <td class='center'      style="width: 10.1%">1</td>
        <td class="center"     style="width: 10%">2</td>
        <td class="center"     style="width: 78%" >3</td>
        </tr>
        </c:forEach>
        </c:when>
        <c:otherwise>
        <tr class="main_info">
        <td colspan="13" class="center">没有相关数据</td>
        </tr>
        </c:otherwise>
        </c:choose>
        </tbody>
        </table>

解决了自己的问题，我还只是个小白,文章仅供参考，如有不当，谢谢指教！！！谢谢
本人稍会一点java css js操作表单、表格，有兴趣可以一起讨论