<таблица>: Как можно отобразить <thead> при прокрутке <tbody> в HTML/CSS

У меня есть большая таблица с около 300 строк и 12 столбцов. Прокручивая таблицу, листая страницу, <thead> содержимое не отображается по умолчанию. Я хотел бы видеть это, прокручивая "внутри" <tbody>, То есть, если верхняя часть экрана начинается со строки, я хочу, чтобы заголовок отображался первым. В противном случае он должен вести себя как обычная таблица.

Распространенное решение, которое я видел до сих пор, состоит в создании таблицы, которая может прокручивать сама себя (таким образом, независимо от прокрутки страниц). То есть, что предлагают ответы на этот вопрос.

Но это не очень удобно, если у вас есть много столбцов, охватывающих экран, в частности, потому что теперь есть две независимые полосы прокрутки. На мобильных устройствах вторая полоса прокрутки отнимает много драгоценного места. И это также очень раздражает в использовании. Вы не можете просто "пролистать", но вы должны сосредоточиться, чтобы поразить эту крошечную полосу прокрутки. В других браузерах вы можете прокручивать, касаясь данных внутри, но как только вы выходите наружу, происходит другое раздражающее движение...

Есть ли чистый способ CSS сделать это?

Источник

4 ответа

Решение

Надеясь на эту позицию: однажды залипание станет окончательным ответом на эту проблему (см. Объявление здесь), как упоминалось в комментариях выше, я все еще был очарован созданием простого доказательства концепции HTML/CSS, без двойных полос прокрутки.

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

  • Дублируйте thead, тот, который прокручивает страницу, и тот, который остается фиксированным
  • Поиграйте с z-индексами, чтобы показать соответствующий тэд

http://jsfiddle.net/willemvb/hEyZh/

Источник

Что делать, если вы:

Создайте таблицу как можно более длинной и широкой, без заголовка. Создал еще один стол с вашей головой. Поместите свою таблицу заголовков в отдельный DIV и поместите ее поверх таблицы данных (z-index + position:absolute). Используя JQuery, при загрузке окна, изменении размера, прокрутке или любых других соответствующих событиях вы можете сбросить каждую ширину TH, чтобы она соответствовала соответствующей TD. Вы также можете перемещать заголовок таблицы DIV при прокрутке. Это должно работать. Дайте мне знать, если вам нужен пример. Таким образом, вы должны видеть только полосы прокрутки браузера, если и когда это необходимо.

Удачи.

Источник

Это может помочь вам:

Источник от

JS Fiddle

HTML

 <!-- IE < 10 does not like giving a tbody a height.  The workaround here applies the scrolling to a wrapped        <div>. -->
 <!--[if lte IE 9]>
<div class="old_ie_wrapper">
 <!--<![endif]-->

 <table class="fixed_headers">
     <thead>
 <tr>
  <th>Name</th>
  <th>Color</th>
  <th>Description</th>
</tr>
</thead>
<tbody>
<tr>
  <td>Apple</td>
  <td>Red</td>
  <td>These are red.</td>
</tr>
<tr>
  <td>Pear</td>
  <td>Green</td>
  <td>These are green.</td>
</tr>
<tr>
  <td>Grape</td>
  <td>Purple / Green</td>
  <td>These are purple and green.</td>
</tr>
<tr>
  <td>Orange</td>
  <td>Orange</td>
  <td>These are orange.</td>
</tr>
<tr>
  <td>Banana</td>
  <td>Yellow</td>
  <td>These are yellow.</td>
</tr>
<tr>
  <td>Kiwi</td>
  <td>Green</td>
  <td>These are green.</td>
</tr>
<tr>
  <td>Plum</td>
  <td>Purple</td>
  <td>These are Purple</td>
</tr>
<tr>
  <td>Watermelon</td>
  <td>Red</td>
  <td>These are red.</td>
</tr>
<tr>
  <td>Tomato</td>
  <td>Red</td>
  <td>These are red.</td>
</tr>
<tr>
  <td>Cherry</td>
  <td>Red</td>
  <td>These are red.</td>
</tr>
<tr>
  <td>Cantelope</td>
  <td>Orange</td>
  <td>These are orange inside.</td>
</tr>
<tr>
  <td>Honeydew</td>
  <td>Green</td>
  <td>These are green inside.</td>
</tr>
<tr>
  <td>Papaya</td>
  <td>Green</td>
  <td>These are green.</td>
</tr>
<tr>
  <td>Raspberry</td>
  <td>Red</td>
  <td>These are red.</td>
</tr>
<tr>
  <td>Blueberry</td>
  <td>Blue</td>
  <td>These are blue.</td>
</tr>
<tr>
  <td>Mango</td>
  <td>Orange</td>
  <td>These are orange.</td>
</tr>
<tr>
  <td>Passion Fruit</td>
  <td>Green</td>
  <td>These are green.</td>
</tr>
</tbody>
 </table>

   <!--[if lte IE 9]>
   </div>
<!--<![endif]-->

CSS

 .fixed_headers {
     width: 750px;
     table-layout: fixed;
     border-collapse: collapse;
  }
 .fixed_headers th {
    text-decoration: underline;
  }
 .fixed_headers th,.fixed_headers td {
         padding: 5px;
         text-align: left;
   }
  .fixed_headers td:nth-child(1),.fixed_headers th:nth-child(1) {
         min-width: 200px;
   }
  .fixed_headers td:nth-child(2),.fixed_headers th:nth-child(2) {
         min-width: 200px;
    }
    .fixed_headers td:nth-child(3),.fixed_headers th:nth-child(3) {
        width: 350px;
    }
   .fixed_headers thead {
              background-color: #333333;
              color: #fdfdfd;
    }
    .fixed_headers thead tr {
             display: block;
             position: relative;
    }
    .fixed_headers tbody {
             display: block;
             overflow: auto;
             width: 100%;
             height: 300px;
    }
    .fixed_headers tbody tr:nth-child(even) {
             background-color: #dddddd;
    }
    .old_ie_wrapper {
            height: 300px;
            width: 750px;
            overflow-x: hidden;
            overflow-y: auto;
     }
    .old_ie_wrapper tbody {
            height: auto;
      }

Источник от

JS Fiddle

Источник

Вы можете использовать плагин, он отлично работает: http://web-gladiator.com/stickythead/

Источник
Другие вопросы по тегам