Как создать прокручиваемую таблицу в Google Chrome

Question

Хорошо, так что это в основном прокручиваемые таблицы.

Если у меня есть элемент таблицы, я могу сделать прокручиваемый контент (с некоторым интересным JavaScript, включая использование полосы прокрутки с использованием ширины), установив фиксированную высоту thead и фиксированную высоту tbody, а затем установив прокрутку на auto Тело.

Это работает в Firefox, но в Google Chrome высота на thead / tbody игнорируется, и вся таблица увеличивается по сравнению с прокруткой, как и предполагалось.

Есть ли решение css, которое можно применить к таблице, чтобы сделать эту работу также в Google Chrome? Или мне нужно сделать заголовок одной таблицы, тело - другой таблицей, обеспечить ширину столбца с помощью js или css и прокрутить родительский элемент таблицы тела с его содержимым?

Answer 1

Полагаю, вы использовали скрипт из следующей страницы

Чтобы исправить ошибку, возникающую в Chrome, измените следующие строки:

 if (document.all && document.getElementById && !window.opera) this.initIEengine();
    if (!document.all && document.getElementById && !window.opera) this.initFFengine();

к этому:

 var is_chrome = navigator.userAgent.toLowerCase().indexOf('chrome') > -1;
    if (is_chrome = true) {
        this.initIEengine()
    }
    else {
        if (document.all && document.getElementById && !window.opera) this.initIEengine();
        if (!document.all && document.getElementById && !window.opera) this.initFFengine();
    }

Отлично работает тогда

Answer 2

Вот полное решение, которое должно работать (используя jQuery ) Вам нужно будет иметь две таблицы, каждая в отдельном элементе div. Каждая таблица будет иметь одинаковый раздел thead. Только у contentTable будет секция tbody

<div class="scrollableTable"
    <div>
        <table class="headerTable">
            <thead>
                <tr>
                    <th>Column 1</th>
                    <th>Column 2</th>
                    <th>Column 3</th>
                </tr>
            </thead>
        </table>
    </div>
     <div style="height:240px; overflow:auto;">
        <table class="contentTable" style="width:100%; margin-top:-20px;">
            <thead>
                <tr>
                    <th>Column 1</th>
                    <th>Column 2</th>
                    <th>Column 3</th>
                </tr>
            </thead>
            <tbody>
                <tr>
                    <td>value 1</td>
                    <td>value 2</td>
                    <td>value 3</td>
                </tr>
                <tr>
                    <td>value 4</td>
                    <td>value 5</td>
                    <td>value 6</td>
                </tr>
                ....
            </tbody>
        </table>
    </div>
</div>

Затем вам придется вызывать эту функцию при каждом изменении данных:

ResizeWidths($('.scrollableTable'));


function ResizeWidths(div)
{
    var headerCells =  $(div).find('.headerTable thead').find('th');
    var contentCells = $(div).find('.contentTable thead').find('th');
    for(var i =0, ii = headerCells.length;i<ii;i++)
    {
        if($(headerCells[i]).width()!=$(contentCells[i]).width())
            $(headerCells[i]).width($(contentCells[i]).width());
    }
}