我们如何使用位置 :sticky;表中的属性粘贴标题部分？答案

【问题标题】：How can we use position :sticky; property in table to stick the header part?我们如何使用位置 :sticky;表中的属性粘贴标题部分？
【发布时间】：2020-04-25 17:36:00
【问题描述】：

我的代码结构是

<div>
     <table>
        <thead>
        <th></th>
        </thead>
      <tbody>
      </tbody>
 </div>

我的代码的标题部分

<div class="box-body" style="width: 100%; display: inline-block; height: 636px; overflow: auto">
   <table class="table table-bordered table-striped table-fit table-fixed myBorderColor" style="width: 100%;">
       <thead>
           <th style="width: 15%; position: -webkit-sticky; position: sticky; top :0;">
               <spring:message code="my_label_name" />
           </th>
           <c:forEach items="${listForHeader[0].getListWeek()}"
               var="dayOfWeek" varStatus="week">
               <th colspan="3" class="text-center" style="position: -webkit-sticky; position: sticky; top: 0; ">
                   <c:if test="${dayOfWeek.week == 1}">
                       <spring:message code="my_label_monday" />
                       <br></br>
                       ${dayOfWeek.day}
                   </c:if> 
                   <c:if test="${dayOfWeek.week == 2}">
                       <spring:message code="my_label_tuesday" />
                       <br></br>
                       ${dayOfWeek.day}
                   </c:if> 
                   <c:if test="${dayOfWeek.week == 3}">
                       <spring:message code="my_label_wednesday" />
                       <br></br>
                           ${dayOfWeek.day}
                   </c:if>
                   <c:if test="${dayOfWeek.week == 4}">
                       <spring:message code="my_label_thursday" />
                       <br></br>
                       ${dayOfWeek.day}
                   </c:if> 
                   <c:if test="${dayOfWeek.week == 5}">
                       <spring:message code="my_label_friday" />
                       <br></br>
                       ${dayOfWeek.day}
                   </c:if>
                   <c:if test="${dayOfWeek.week == 6}">
                       <spring:message code="my_label_saturday" />
                       <br></br> 
                       ${dayOfWeek.day}
                   </c:if> 
                   <c:if test="${dayOfWeek.week == 7}">
                       <spring:message code="my_label_sunday" />
                       <br></br> 
                       ${dayOfWeek.day}
                   </c:if>
               </th>
           </c:forEach>
       </thead>

我想将此标题修复为粘性，所以我在标签中使用style="width: 15%; position: -webkit-sticky; position: sticky; top :0;" <div class="box-body" style="width: 100%; display: inline-block; height: 636px; overflow: auto"> 它适用于 chrome 但它不适用于 Internet Explorer，我也尝试了位置：固定，但它也不适用于 IE。你能提供一些替代方法来修复标题吗？

【问题讨论】：

标签： html css web-applications responsive-design

【解决方案1】：

position:sticky 在 IE 中不受支持。查看浏览器支持https://caniuse.com/#search=sticky

也许 position:fixed 是这里提到的解决方案：Position: sticky buttons not working in IE 11

希望这会有所帮助。

【讨论】：