Прокручиваемые таблицы идей (хитрый) - PullRequest
Новая
       2

Прокручиваемые таблицы идей (хитрый)

2 голосов
/ 28 июня 2011

Я борюсь с этим уже некоторое время.Скажем, у меня есть таблица с множеством строк и столбцов (переполняет страницу по вертикали и по горизонтали).Я хочу исправить первый ряд (thead) на месте.

Подвох : я хочу, чтобы вертикальная и горизонтальная полосы прокрутки всегда были видны.т.е. я не хочу, чтобы пользователю приходилось прокручивать по горизонтали, чтобы найти вертикальную полосу прокрутки, и наоборот.

Лучшее, что я мог придумать, - это разделить thead и tbody на две отдельные таблицы ссинхронизированная прокрутка, но это создает проблемы с выравниванием и соответствием ширины ячеек, поэтому я бы предпочел не делать этого.

Как бы вы решили эту проблему?

Ответы [ 3 ]

2 голосов
/ 28 июня 2011

Нет необходимости разбивать таблицу на 2 таблицы. Вы можете попробовать следующее, которое использует одну таблицу, но все еще замораживает заголовок. 

<table >  
    <thead><tr><th>This is my header</th></tr></thead>
    <tbody style="max-height:100px;overflow:auto;display:block">
        <tr>
            <td>col1</td>
        </tr>
        <tr>
            <td>col1</td>
        </tr><tr>
            <td>col1</td>
        </tr><tr>
            <td>col1</td>
        </tr><tr>
            <td>col1</td>
        </tr><tr>
            <td>col1</td>
        </tr><tr>
            <td>col1</td>
        </tr><tr>
            <td>col1</td>
        </tr><tr>
            <td>col1</td>
        </tr><tr>
            <td>col1</td>
        </tr><tr>
            <td>col1</td>
        </tr><tr>
            <td>col1</td>
        </tr><tr>
            <td>col1</td>
        </tr><tr>
            <td>col1</td>
        </tr><tr>
            <td>col1</td>
        </tr><tr>
            <td>col1</td>
        </tr><tr>
            <td>col1</td>
        </tr><tr>
            <td>col1</td>
        </tr><tr>
            <td>col1</td>
        </tr><tr>
            <td>col1</td>
        </tr>
    </tbody>
</table>
0 голосов
/ 30 июня 2011

Для тех, кто хочет достичь аналогичного эффекта:

Оберните свою таблицу в div с width:100%; и overflow:auto;.

Скопируйте часть заголовка вашей таблицы и создайтеновый стол с этим.ПОЗИЦИЯ В ЭТОМ СТОЛЕ КАК АБСОЛЮТНО!(position:absolute;)

Поместите вашу таблицу заголовков в тот же div, что и реальная таблица.(Он должен идеально соответствовать исходной части заголовка.)

Используйте jQuery для управления прокруткой div и закрепите заголовок на месте ... 

jQuery(document).ready(function() {
    jQuery('#tableDiv').scroll(function() {
        jQuery('#copiedHeaderTable').css('top', jQuery(this).scrollTop());
    });
})

Это решение, конечно, делаетнесколько предположений о ваших требованиях, но имеет несколько преимуществ (простота - главное).

Редактировать Чтобы обеспечить совпадение ширины ячеек, оберните все содержимое в div и установите ширинукаждый div вручную перед клонированием: 

jQuery('#headerRow th div').each(function() {
    jQuery(this).css('width', jQuery(this).parent()[0].offsetWidth+'px');
});
0 голосов
/ 28 июня 2011

Я использую плагин jquery datatables, пример того, что вы хотите, можно увидеть здесь http://www.datatables.net/examples/basic_init/scroll_xy.html

...