Как мы можем использовать положение: липкое; свойство в таблице, чтобы вставить часть заголовка? - PullRequest
Новая
       2

Как мы можем использовать положение: липкое; свойство в таблице, чтобы вставить часть заголовка?

1 голос
/ 08 января 2020

Структура моего кода: 

<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 Но это не работает в Inte rnet Explorer, также я опробовал положение: исправлено, но это также не работает в IE. Можете ли вы дать альтернативу исправить заголовок.

1 Ответ

0 голосов
/ 08 января 2020

позиция: липкая не поддерживается в IE. Посмотрите на поддержку браузера на https://caniuse.com/#search = sticky

Может быть позиция: фиксированная решение, как упомянуто здесь: Позиция: липкие кнопки не работая в IE 11

Надеюсь, это поможет.

...