Прикрепленный заголовок к родителю с переполнением - PullRequest
Новая
       41

Прикрепленный заголовок к родителю с переполнением

0 голосов
/ 21 июня 2019

Я видел варианты этой проблемы везде, но, похоже, ни одна из них не решила мою проблему.У меня есть высокая страница, на которой уже есть полоса прокрутки Y из-за содержимого.Часть контента - это div style="position: relative;", назовем его Div1.Div1 содержит содержимое, вызывающее полосу прокрутки X и Y.В Div1 допустим, у меня есть таблица с таким количеством столбцов, что она вызывает переполнение X, и столько строк, что это вызывает переполнение Y Div1.

Есть ли способ заставить строку заголовка таблицы придерживаться вершины и поддерживать ее ширину в Div1?

Представьте себе такую ​​структуру: 

<div id="MainPageDiv">
    //OnScreenContent
    //OnScreenContent
    //OnScreenContent
    //OnScreenContent
    <div class=outerDiv>
        <table class="innerTable">
            <thead>
                //thead columns
            </thead>
            <tbody>
                //tbody rows
            </tbody>
        </table>
    </div>
    //OnScreenContent
    //OnScreenContent
    //OnScreenContent
    //OFFScreenContent
    //OFFScreenContent
    //OFFScreenContent
</div>

Так что externalDiv и таблица расположены немного дальше от верхней части страницы.Также обратите внимание, что OFFscreenContent находится ниже.

Я хочу, чтобы главная страница прокручивалась как обычно, но в разделе externalDiv я хочу, чтобы thead оставался в верхней части контейнера externalDiv, когда я прокручиваю в outerDiv.

Ответы [ 2 ]

0 голосов
/ 26 июня 2019

В итоге я использовал CSS и jQuery, чтобы получить желаемый результат. В моем классе обертки я использовал position: relative, а в заголовке таблицы я установил его положение absolute, а в событии прокрутки оберток я установил значение top, чтобы scrollTop() обертки было.

0 голосов
/ 22 июня 2019 

.outerDiv {
  overflow:scroll;
  height:140px;
}
thead {
 position:absolute;
  top:0; 
}
tbody {
  display:block;
  position:relative;
  padding-top:10px;
}
<div class="outerDiv">
  <table class="innerTable">
  <thead>
    <tr>
      <th>#</th>
      <th>First</th>
      <th>Last</th>
      <th>Handle</th>
    </tr>
  </thead>
  <tbody>
    <tr>
      <td>1</td>
      <td>Mark</td>
      <td>Otto</td>
      <td>@mdo</td>
    </tr>
    <tr>
      <td>2</td>
      <td>Jacob</td>
      <td>Thornton</td>
      <td>@fat</td>
    </tr>
    <tr>
      <td>3</td>
      <td colspan="2">Larry the Bird</td>
      <td>@twitter</td>
    </tr>
    <tr>
      <td>1</td>
      <td>Mark</td>
      <td>Otto</td>
      <td>@mdo</td>
    </tr>
    <tr>
      <td>1</td>
      <td>Mark</td>
      <td>Otto</td>
      <td>@mdo</td>
    </tr>
     <tr>
      <td>1</td>
      <td>Mark</td>
      <td>Otto</td>
      <td>@mdo</td>
    </tr>
    <tr>
      <td>2</td>
      <td>Jacob</td>
      <td>Thornton</td>
      <td>@fat</td>
    </tr>
  </tbody>
</table>
</div>

Есть два способа достичь этого

  1. установить переполнение: прокрутка; на родительский элемент таблицы.
  2. Здесь вы можете использовать встроенный Bootstrap реагирующий на таблицы класс . https://getbootstrap.com/docs/4.1/content/tables/#responsive-tables
...