Заголовки липких таблиц в авто переполнения внутри сетки - PullRequest
Новая
       21

Заголовки липких таблиц в авто переполнения внутри сетки

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

Подобные вопросы были опубликованы, но это новый взгляд на проблему.

Что я знаю до сих пор

  • Позиция sticky не работает внутри родителя с переполнением
  • Возможно «взломать» его с помощью javascript, но со всеми движущимися частями это слишком много работы (позиции переполнения, размеры и т. Д.)

Моя проблема в контексте

  • Я использую сетку, где top и bottom должны быть зафиксированы, а main должна быть прокручиваемой
  • В основном есть таблица, которая в будущем может переполниться как вертикально, так и горизонтально
  • th установлен на липкий (но не работает из-за переполнения)
  • Один раз я справился с этим, используя сетку со свободными элементами (без родительского элемента), но это было слишком грязно, чтобы работать с

Вопрос

  • Я предпочитаю чистый раствор CSS
  • Как мне обойти это?

https://jsfiddle.net/jw147aqk/1/

Вам нужно изменить размер окна, чтобы таблица была переполнена. 

* {
  padding: 0;
  margin: 0;
}

html, body {
  height: 100%;
}

.wrap {
  background: #eee;
  height: 100%;
  
  display: grid;
  grid-template-rows: 50px 1fr 50px;
  grid-template-areas: "header" "main" "footer";
}

header {
  grid-area: header;
  background: green;
  color: #fff;
}

main {
  overflow-y: auto;
}

footer {
  grid-area: footer;
  background: #ba0000;
  color: #fff;
}

table {
  width: calc(100% - 3px);
  border-collapse: collapse;
}

table th {
  background: #000;
  color: #fff;
  height: 50px;
  position: sticky;
}

table td {
  background: #fff;
  height: 50px;
  border: 1px solid #ccc;
}
<div class="wrap">
  <header>My header</header>
  <main>
    <table>
      <thead>
        <tr>
          <th>Head first</th>
          <th>Head second</th>
        </tr>
      </thead>
      <tbody>
        <tr>
          <td>Cell first</td>
          <td>Cell second</td>
        </tr>
        <tr>
          <td>Cell first</td>
          <td>Cell second</td>
        </tr>
        <tr>
          <td>Cell first</td>
          <td>Cell second</td>
        </tr>
        <tr>
          <td>Cell first</td>
          <td>Cell second</td>
        </tr>
        <tr>
          <td>Cell first</td>
          <td>Cell second</td>
        </tr>
        <tr>
          <td>Cell first</td>
          <td>Cell second</td>
        </tr>
        <tr>
          <td>Cell first</td>
          <td>Cell second</td>
        </tr>
        <tr>
          <td>Cell first</td>
          <td>Cell second</td>
        </tr>
        <tr>
          <td>Cell first</td>
          <td>Cell second</td>
        </tr>
        <tr>
          <td>Cell first</td>
          <td>Cell second</td>
        </tr>
        <tr>
          <td>Cell first</td>
          <td>Cell second</td>
        </tr>
        <tr>
          <td>Cell first</td>
          <td>Cell second</td>
        </tr>
      </tbody>
    </table>
  </main>
  <footer>Footer</footer>
</div>

Ответы [ 2 ]

2 голосов
/ 05 июня 2019

добавить top: 0; в таблицу th 

table th {
  background: #000;
  color: #fff;
  height: 50px;
  position: sticky;
  top: 0;
}
1 голос
/ 05 июня 2019

Дайте имя класса <th>, который вы хотите сделать липким, и используйте Position:sticky для этого класса, как показано ниже: 

.stickyThis{
  position: -webkit-sticky;
  position: sticky;
  top: 0;
}
* {
  padding: 0;
  margin: 0;
}

html, body {
  height: 100%;
}

.wrap {
  background: #eee;
  height: 100%;
  
  display: grid;
  grid-template-rows: 50px 1fr 50px;
  grid-template-areas: "header" "main" "footer";
}

header {
  grid-area: header;
  background: green;
  color: #fff;
}

main {
  overflow-y: auto;
}

footer {
  grid-area: footer;
  background: #ba0000;
  color: #fff;
}

table {
  width: calc(100% - 3px);
  border-collapse: collapse;
}

table th {
  background: #000;
  color: #fff;
  height: 50px;
  position: sticky;
}

table td {
  background: #fff;
  height: 50px;
  border: 1px solid #ccc;
}
<div class="wrap">
  <header>My header</header>
  <main>
    <table>
      <thead>
        <tr>
          <th class="stickyThis">Head first</th>
          <th class="stickyThis">Head second</th>
        </tr>
      </thead>
      <tbody>
        <tr>
          <td>Cell first</td>
          <td>Cell second</td>
        </tr>
        <tr>
          <td>Cell first</td>
          <td>Cell second</td>
        </tr>
        <tr>
          <td>Cell first</td>
          <td>Cell second</td>
        </tr>
        <tr>
          <td>Cell first</td>
          <td>Cell second</td>
        </tr>
        <tr>
          <td>Cell first</td>
          <td>Cell second</td>
        </tr>
        <tr>
          <td>Cell first</td>
          <td>Cell second</td>
        </tr>
        <tr>
          <td>Cell first</td>
          <td>Cell second</td>
        </tr>
        <tr>
          <td>Cell first</td>
          <td>Cell second</td>
        </tr>
        <tr>
          <td>Cell first</td>
          <td>Cell second</td>
        </tr>
        <tr>
          <td>Cell first</td>
          <td>Cell second</td>
        </tr>
        <tr>
          <td>Cell first</td>
          <td>Cell second</td>
        </tr>
        <tr>
          <td>Cell first</td>
          <td>Cell second</td>
        </tr>
      </tbody>
    </table>
  </main>
  <footer>Footer</footer>
</div>
...