Сделайте TBODY прокручиваемым в браузерах Webkit

Question

Мне известен этот вопрос , но ни один из ответов не работает в Safari, Chrome и т. Д.

Принятая стратегия (, как показано здесь ) состоит в том, чтобы установить высоту tbody и свойства переполнения следующим образом:

<table>
    <thead>
        <tr><th>This is the header and doesn't scroll</th></tr>
    </thead>
    <tbody style="height:100px; overflow:auto;">
        <tr><td>content that scrolls</td></tr>
        <tr><td>content that scrolls</td></tr>
        <tr><td>content that scrolls</td></tr>
        <tr><td>content that scrolls</td></tr>
        <tr><td>content that scrolls</td></tr>
        <tr><td>content that scrolls</td></tr>
        <tr><td>content that scrolls</td></tr>
    </tbody>
</table>

К сожалению, это не работает ни в одном браузере webkit. Существует сообщение об ошибке 1011 *, которое, по-видимому, не является высокоприоритетным (от 05 июня).

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

Answer 1

Вот рабочий пример:

http://www.imaputz.com/cssStuff/bigFourVersion.html

Вы должны добавить блок display: thead> tr и tbody

Answer 2

Использование дисплея: стиль блока работает только при наличии 1 столбца. Если у вас есть несколько столбцов данных - с несколькими полями - тогда отобразится display: block, чтобы сделать прокручиваемыми все столбцы данных, но под 1-м столбцом (делает то же самое в Firefox - единственном браузере, который я знаю, который хорошо прокручивает) Кстати, в Firefox вы можете использовать стиль overflow-x: hidden для подавления горизонтальной прокрутки.

Я понял, что проблема, о которой я упоминаю, возникает, только если вы не указываете ширину для элементов th & td - если вы можете исправить ширину столбцов, тогда это работает. Для меня проблема в том, что я не могу исправить ширину столбца.

Answer 3

Попробуйте первый метод на этой странице, чистый CSS с одной таблицей (2 деления вокруг таблицы, и thead позиционируется абсолютно): http://www.cssplay.co.uk/menu/tablescroll.html Кажется, работает на FF4 / IE9 / IE8 в дополнение к IE7 / FF3.6.

Answer 4

Я увидел отличное решение Шона Хэдди и взял на себя смелость , сделав некоторые правки :

• Используйте классы вместо ID, так что один сценарий jQuery может быть повторно использован для несколько таблиц на одной странице
• Добавлена ​​поддержка семантических элементов таблицы HTML, таких как caption, thead, tfoot и tbody
• Добавлена ​​опция полосы прокрутки, поэтому она не будет отображаться для таблиц, которые "короче", чем высота прокрутки
• Изменена ширина прокрутки div, чтобы полоса прокрутки доходила до правого края таблицы
• Сделана концепция доступна
  • использование aria-hidden = "true" для введенного статического заголовка таблицы
  • и оставив оригинальную thead на месте, просто скрытый с помощью jQuery и установленный aria-hidden="false"
• Показаны примеры нескольких таблиц с разными размерами

Шон сделал тяжелую работу, хотя. Спасибо Мэтту Бёрленду за указание на необходимость поддержки tfoot.

Пожалуйста, убедитесь сами в http://jsfiddle.net/jhfrench/eNP2N/

Answer 5

У меня была та же проблема, и я написал скрипт jQuery, чтобы сделать это для меня ... использует два элемента таблицы и соответственно форматирует CSS. Надеюсь, это поможет другим, у кого такая же проблема ...

http://jsfiddle.net/pe295/1/

Answer 6

A давно столкнулся с той же проблемой, и я, наконец, изложил подход с двумя таблицами. Это результат: http://jsfiddle.net/bGr4V/3/, работает для всех браузеров (IE6 + вкл.).

В этот jsFiddle можно играть с чистой версией.

Мое решение состояло в том, чтобы добавить исправить ячейку <th class="fix"> </th> в thead, чтобы заполнить пространство полосы прокрутки в tbody, а затем дать одному столбцу переменную ширину (<td class="grow">) таким образом, заголовок fix cell не сможет сравниться с размером.

HTML:

<div class="fixed_table">
  <div class="head">
    <table>
      <thead>
        <tr>
          <th>Column header</th>
          <th class="grow">Column header</th>
          <th class="fix"> </th>
        </tr>
      </thead>
    </table>
  <div class="body">
    <table class="full_table">
      <caption class="caption">Caption</caption>
      <tbody>
        <tr>
          <td>Data</td>
          <td class="grow">Data</td>
        </tr>
        <tr>
          <td>...</td>
          <td>...</td>
        </tr>
        <tr>
          <td>...</td>
          <td>...</td>
        </tr>
      </tbody>
    </table>
  </div>
</div>

CSS: имеет * и _ хак для ie6-7 и -webkit, специфичный для заголовка fix-cell , соответствующий ширине прокрутки в каждом случае.

.fixed_table table {
  table-layout: fixed;
  width: auto;
  border-width: 0;
  padding: 0;
  border-collapse: collapse;
}

.fixed_table .body {
  overflow: scroll;
  overflow-x: hidden;
  max-height: 10.75em;
  min-height: 2.5em;
  padding-bottom: 0.8em;
  *padding-right: 17px; /*ie7 & ie6*/
  _padding-right: 0; /*ie6*/
  _height: 10em ;
}

.fixed_table th, .fixed_table td {
  width: 4.7em;
}

.fixed_table .grow {
  width: auto;
}

.fixed_table .fix {
  width: 16px;
  *width: 17px; /*ie7 & ie6*/
  _width: 16px; /*ie6*/
}

/* webkit specific */
@media screen and (-webkit-min-device-pixel-ratio:0) {
  .fixed_table .fix{ width: 17px }
}

Answer 7

Думаю, что я добавлю свой раствор в смесь - http://tjvantoll.com/2012/11/10/creating-cross-browser-scrollable-tbody/.

Он использует тот же базовый маршрут, что и решение @Michael Koper, но включает обходной путь, поэтому таблица в IE будет выглядеть правильно до IE6.

Я решаю проблему ширины, давая <table> a table-layout: fixed и явно назначая ширину ячейкам в каждом столбце. Не идеально, но он создает семантическую таблицу, которая выровняет кросс-браузер независимо от того, нужна ли полоса прокрутки.

Демо: http://codepen.io/tjvantoll/pen/JEKIu

Answer 8

Это может быть излишним в этом вопросе, но YUI по-прежнему предоставляет, возможно, лучший бесплатный кросс-браузерный набор данных. Может использоваться и для данных только для чтения.

YUI 2 DataTable

YUI 3 DataTable

Нажмите на примеры, чтобы увидеть прокручиваемые образцы. Поскольку я новичок в stackoverflow, я могу опубликовать только эти две ссылки.

Answer 9

Это действительно довольно нахально, но может это кому-нибудь поможет ...

http://jsfiddle.net/yUHCq/1/

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

Добавлен переходный DOCTYPE для совместимости с IE.

Answer 10

Я разработал решение javascript для вышеуказанной проблемы
который работает только в Firefox 7+, так как я тестировал только в FF

Я пришел к этой теме и нашел решение, на которое указал Майкл Копер

В этом решении три важные вещи сделаны
1) исправить ширину столбца
2) отображение thead> tr установлено на блок
3) дисплей tbody настроен на блокировку

как уже упоминали другие, есть проблема с установкой ширины, я тоже нахожусь в этом положении;
даже я не могу фиксировать ширину статически

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

следующее решение в javascript, которое работает только в FF
(я тестировал только в FF, у меня нет доступа к другим браузерам)

       function test1(){                
            var tbodys = document.getElementsByTagName("TBODY");
            for(var i=0;i<tbodys.length;i++){
                do_tbodyscroll(tbodys[i]);
            }
        }


      function do_tbodyscroll(_tbody){
            // get the table node 
            var table = _tbody.parentNode;

            // first row of tbody 
            var _fr = _tbody.getElementsByTagName("TR")[0];

            // first row cells .. 
            var _frcells = _fr.cells;

            // Width array , width of each element is stored in this array 
            var widtharray = new Array(_frcells.length);

            for(var i=0;i<_frcells.length;i++){                    
                widtharray[i] = _frcells[i].scrollWidth;
            }                

            // Apply width to first row                  
            for(var i=0;i<_frcells.length;i++){
                _frcells[i].width = widtharray[i];                   
            }                 

            // Get the Last row in Thead ... 
            // COLGROUPS USING COLSPAN NOT YET SUPPORTED

            var thead = table.getElementsByTagName("THEAD")[0];
            var _rows = thead.getElementsByTagName("TR");
            var tableheader = _rows[_rows.length - 1];
            var headercells = tableheader.cells;

            // Apply width to header ..                                
            for(var i=0;i<headercells.length;i++){
                headercells[i].width = widtharray[i];
            }

            // ADD 16 Pixel of scroll bar to last column ..
            headercells[headercells.length -1 ].width = widtharray[headercells.length -1] + 16;

            tableheader.style.display = "block";
            _tbody.style.display = "block";  
        }

Это решение определяет ширину столбца в браузере.
и снова установите ту же ширину для столбцов (заголовок и первая строка tbody)
после того, как ширина установлена; thead> tr и tbody дисплей блокируется

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