<table>: как <thead> отображаться при прокрутке через <tbody> в HTML/CSS

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

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

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

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

ОТВЕТЫ

Ответ 1

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

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

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

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

Ответ 2

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

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

Удачи.

Ответ 3

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

Источник из

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