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

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

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

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

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

 A.M.K16 окт. 2012 г., 20:53
Мое решение не лучше, чем ответы на другой вопрос
 A.M.K16 окт. 2012 г., 20:38
Я отвечаю на другой вопрос, я опубликую свой ответ всего за секунду.
 A.M.K16 окт. 2012 г., 19:49
+1 хочуposition: sticky; :D
 A.M.K16 окт. 2012 г., 20:26
Chrome 23+ с включенными экспериментами WebKit, версия AKA 1 для меня: D
 Willem Van Bockstal16 окт. 2012 г., 19:48
Боюсь, не без сценариев, иначе придется ждать поддержки css 'position: sticky'

Ответы на вопрос(4)

 dma_k16 июл. 2014 г., 15:47
В некотором смысле это решение повторяетсяJQuery Datatable который также создает отдельную таблицу для заголовка и отдельную таблицу для тела.

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

Удачи.

 false16 окт. 2012 г., 20:14
@ A.M.K: Да, действительно.
 A.M.K16 окт. 2012 г., 20:07
Я думал, что вы сказали нет JS ...
 false16 окт. 2012 г., 20:02
+1: что ты имеешь ввиду по сутиРешение № 2; да?
 Bryan Allo16 окт. 2012 г., 22:19
Я построил сетки данных человека с нуля, но, к сожалению, я не могу придумать чисто CSS-решение, которое удовлетворит все сценарии пользователя / данных без использования JS. Определенно приветствует свежий / творческий подход, который выполняет это.
 dma_k16 июл. 2014 г., 16:00
@BryanAllo: приведена демонстрация предлагаемого вами решения.Вот (Я нашел это вэтот ответ).
Решение Вопроса

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

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

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

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

 dma_k16 июл. 2014 г., 15:43
Выглядит хорошо. тем не мениевызывает совпадение когда «настоящий» заголовок таблицы не полностью прокручен.
 false17 окт. 2012 г., 02:27
+1. Странно то, что документ W3 о таблицах явно упоминает эту возможностьэта мантра повторяется 9 раз на SO, И все же, чистого решения пока нет ...
 Willem Van Bockstal17 июл. 2014 г., 09:40
Я знаю. См. Описание в jsfiddle: «маленький сбой в перекрытии thead». Я не нашел способ исправить это без сценариев.
 Willem Van Bockstal28 янв. 2016 г., 12:18
@Steven, обычный текст будет переформатирован, для более длинных строк вы можете работать с многоточием текста:jsfiddle.net/hEyZh/138 или просто сделайте клетки шире :) Опять просто упражнение, а не идеальное решение.
 Steven28 янв. 2016 г., 01:52
Это также не удастся, если текст в ячейке слишком длинный

Источник от

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

 dma_k16 июл. 2014 г., 15:41
Спасибо за интересное решение. Выглядит как один при условииВот.
 Lambart22 июл. 2015 г., 01:10
@dma_k Nishchit отдает должное упомянутому вами источнику ...

Ваш ответ на вопрос