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

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

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

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

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

 false16 окт. 2012 г., 19:47
@Olaf Dietsche: Jup, тоже взглянул на это ...
 A.M.K16 окт. 2012 г., 20:53
Мое решение не лучше, чем ответы на другой вопрос
 false16 окт. 2012 г., 19:43
@WillemVanBockstal:Это мой стол
 A.M.K16 окт. 2012 г., 20:26
Chrome 23+ с включенными экспериментами WebKit, версия AKA 1 для меня: D
 A.M.K16 окт. 2012 г., 19:49
+1 хочуposition: sticky; :D
 A.M.K16 окт. 2012 г., 20:38
я отвечаю на другой вопрос, яВыложу свой ответ всего за секунду.
 A.M.K16 окт. 2012 г., 19:48
Но если вы поместите его в iFrame, то да,возможно.
 Willem Van Bockstal16 окт. 2012 г., 19:42
Есть ли на странице другие элементы или это только большой стол?
 false16 окт. 2012 г., 19:44
@ A.M.K: Это должно быть как можно более низким уровнем технологий. То есть не решение JS-only.
 A.M.K16 окт. 2012 г., 19:45
Нет, ни за что на этом столе ...
 Willem Van Bockstal16 окт. 2012 г., 19:48
Не без сценариев ябоюсь, или вам придется ждатьположение: липкие» поддержка css
 A.M.K16 окт. 2012 г., 19:39
CSS? Нет, вы можете использовать JQuery или JS?
 false16 окт. 2012 г., 20:35
@ A.M.K: Если это будет будущий ответ, пожалуйста, опубликуйте его как ответ сейчас ... Я '
 Olaf Dietsche16 окт. 2012 г., 19:46
Кажется, это популярный вопрос:stackoverflow.com/q/8972643/1741542 среди других

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

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

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

Удачи.

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

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

Источник от

JS Fiddle

HTML

 
 

 
     
 
  Name
  Color
  Description




  Apple
  Red
  These are red.


  Pear
  Green
  These are green.


  Grape
  Purple / Green
  These are purple and green.


  Orange
  Orange
  These are orange.


  Banana
  Yellow
  These are yellow.


  Kiwi
  Green
  These are green.


  Plum
  Purple
  These are Purple


  Watermelon
  Red
  These are red.


  Tomato
  Red
  These are red.


  Cherry
  Red
  These are red.


  Cantelope
  Orange
  These are orange inside.


  Honeydew
  Green
  These are green inside.


  Papaya
  Green
  These are green.


  Raspberry
  Red
  These are red.


  Blueberry
  Blue
  These are blue.


  Mango
  Orange
  These are orange.


  Passion Fruit
  Green
  These are green.


 

   

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

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

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

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

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

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

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

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

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

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