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

Question

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

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

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

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

EDIT2

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

EDIT3

текущий таблица код.У него нет вертикальной прокрутки, хотя я могу прокручивать вертикально.

<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>

Answer 1

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

Answer 2

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

Answer 3

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

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

Answer 4

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

Answer 5

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