Как сделать таблицу, которая шире, чем размер экрана, прокручивается и фиксируется строка заголовка?

У меня есть table с 2 колонками и каждый столбец шириной 800 пикселей. Я хочу показать эту таблицу в окне 800x50. Поэтому для просмотра полной таблицы должна быть горизонтальная и вертикальная полоса прокрутки.Как сделать таблицу, которая шире, чем размер экрана, прокручивается и фиксируется строка заголовка?

Хотя я нашел несколько связанных решений (this и this) на SO, они работают только в том случае, если ширина таблицы меньше размера экрана. В моем случае размер экрана составляет 1200 пикселей, а общая ширина таблицы - 1600 пикселей.

Как я мог это сделать? Я хочу достичь чего-то вроде this.

EDIT К сожалению, я забыл добавить еще одно требование. Сожалею. Я хочу, чтобы заголовок таблицы оставался фиксированным, пока пользователь прокручивает таблицу.

EDIT2

Я попытался ниже упомянутых решений, чтобы обернуть в DIV, но в этом случае вертикальная полоса прокрутки не отображается. См. this table с оберткой div. Кажется, эта проблема возникает только в том случае, если ширина таблицы больше размера экрана. Я тестирую FF3.6.

EDIT3

тока table код. У этого нет вертикального скроллера, хотя я могу прокручивать его вертикально.

<div style="overflow:scroll; width:800px;height:50px" > 
<table style="width:1600px" border="1"> 
    <thead> 
    <tr> 
     <th style="width:800px">id_1</th> 
     <th style="width:800px">id_1</th> 
    </tr> 
    </thead> 
    <tbody style=""> 
    <tr><td>1200</td><td>1200</td></tr> 
    <tr><td>1200</td><td>1200</td></tr> 
    <tr><td>1200</td><td>1200</td></tr> 
    <tr><td>1200</td><td>1200</td></tr> 
    <tr><td>1200</td><td>1200</td></tr> 
    <tr><td>1200</td><td>1200</td></tr> 
    </tbody> 
</table> 
</div>

источник

2010-04-13 understack

Мне очень жаль, но 800x50 является непригодным для измерения. Только полосы прокрутки занимают около 20 пикселей, что дает вам около 30 пикселей, чтобы играть с ..., поэтому вы просите своих пользователей прокручивать одну или две строки, видимые за раз? Уверен, вы не имели в виду 800x500? – Robusto

Это поддельные номера, я просто хочу, чтобы эта таблица работала, а затем соответствующим образом меняла размеры. – understack

Вы можете обернуть таблицу в div с фиксированным размером (800x50) и установить overflow:scroll.

источник

2010-04-13 18:38:59

@Vivin Paliath: Я не вижу вертикальную прокрутку с этим, когда длина стола больше размера экрана. Пожалуйста, см. Это: http://jsbin.com/uwubu3/3 – understack

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

Я тоже не вижу полосы прокрутки, но я считаю, что это потому, что ваш рост мал. Попробуйте установить высоту до 100 пикселей, и она будет работать нормально. –

Поместите таблицу в DIV с шириной < 800, и установить overflow: scroll.

источник

2010-04-13 18:38:44

Я не знаю, будет ли это работать, но вы пробовали установить max-width: 100% за страницу?

источник

2010-04-13 18:40:13 animuson

Просто добавьте overflow:scroll в css вашего элемента таблицы. Btw. ваш пример не показывает прокрутку.

источник

2010-04-13 18:41:11

@Paul de Vrieze: исправлен пример. Теперь он показывает прокрутку, но только горизонтальную. – understack

Если вы хотите, чтобы заголовок остается неизменным просто сделать некоторые CSS

#header { 
    position:fixed; 
    left:0; 
    top:0; 
}

источник

2010-04-13 18:58:23 Catfish

Как сделать таблицу, которая шире, чем размер экрана, прокручивается и фиксируется строка заголовка?

ответ

Смежные вопросы