HTML-таблица с фиксированными заголовками и фиксированным столбцом?

Существует ли метод CSS/JavaScript для отображения длинной таблицы HTML, так что заголовки столбцов остаются фиксированными на экране, а первый coloumn остается фиксированным и прокручивается с данными.

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

Если есть плагин jQuery, это было бы здорово! Если это помогает единственному браузеру, о котором я забочусь, это Firefox.

Ответы

Ответ 1

Рабочий пример ссылка, отправленная pranav:

http://jsbin.com/nolanole/1/edit?html,js,output

FYI: протестирован в IE 6, 7 и 8 (режим совместимости включен или выключен), FF 3 и 3.5, Chrome 2. Не подходит для чтения с экрана (заголовки не входят в таблицу содержимого).

ИЗМЕНИТЬ 5/5/14: переместите пример в jsBin. Это старый, но удивительно по-прежнему работает в современных браузерах Chrome, IE и Firefox (хотя для IE и Firefox могут потребоваться некоторые корректировки высоты строк).

Ответ 2

Если вы хотите, чтобы заголовки сохранялись, пока данные в таблице прокручиваются вертикально, вы должны реализовать стиль <tbody> с "overflow-y: auto" следующим образом:

<table>
  <thead>
    <tr>
      <th>Header1</th>
       . . . 
    </tr>
   </thead>
   <tbody style="height: 300px; overflow-y: auto"> 
     <tr>
       . . .
     </tr>
     . . .
   </tbody>
 </table>

Если содержание <tbody> растет выше требуемой высоты, оно начнет прокрутку. Однако заголовки остаются фиксированными вверху, независимо от положения прокрутки.

Ответ 3

Возможно, вы ищете this.

У него есть некоторые известные проблемы.

Ответ 4

Я вижу это, хотя старый вопрос, довольно хорошее место, чтобы подключить мой собственный script:

http://code.google.com/p/js-scroll-table-header/

Он просто работает без конфигурации и очень легко настраивается.

Ответ 5

плагин jQuery DataTables - отличный способ добиться превосходного фиксированного столбца (ов) и заголовки.

Обратите внимание на раздел примеров сайта и "дополнительные".
http://datatables.net/examples/
http://datatables.net/extras/

В разделе "Дополнительно" есть инструменты для фиксированных столбцов и фиксированных заголовков.

Фиксированные столбцы
http://datatables.net/extras/fixedcolumns/
(Я считаю, что пример на этой странице является наиболее подходящим для вашего вопроса.)

Фиксированный заголовок
http://datatables.net/extras/fixedheader/
(Включает пример с полноэкранным макетом таблицы страниц: http://datatables.net/release-datatables/extras/FixedHeader/top_bottom_left_right.html)

Ответ 7

Я создал что-то, у которого есть фиксированный заголовок, фиксированный нижний колонтитул, фиксированный левый столбец, а также фиксированный правый столбец. Это работает только в IE. Поскольку большинство пользователей все еще используют IE, это может быть полезно. Пожалуйста, найдите здесь код Прокручиваемая таблица. Пожалуйста, дайте мне ваши предложения.

Тем временем я работаю над исправлением столбцов в другом браузере. Я буду держать вас в курсе.: -)

Ответ 8

<script>
   $(document).ready(function () {
   $("#GridHeader table").html($('#<%= GridView1.ClientID %>').html());
   $("#GridHeader table tbody .rows").remove();
   $('#<%= GridView1.ClientID %> tr:first th').hide();
});
</script>

<div id="GridHeader">
    <table></table>
</div>

<div style="overflow: auto; height:400px;">
    <asp:GridView ID="GridView1" runat="server" />
</div>

Ответ 9

Не совсем совершенный, но он приблизил меня к некоторым из лучших ответов здесь.

Две разные таблицы, одна с заголовком и другая, завернутая с div с содержимым

<table>
  <thead>
    <tr><th>Stuff</th><th>Second Stuff</th></tr>
  </thead>
</table>
<div style="height: 600px; overflow: auto;">
  <table>
    <tbody>
      //Table
    </tbody>
  </table>
</div>

Ответ 10

YUI DataTable

Я не знаю, имеет ли YUI DT эту функцию, но я не удивлюсь, если это произойдет.

Ответ 12

Первый столбец имеет полосу прокрутки в ячейке прямо под заголовками

<table>
    <thead>
        <th> Header 1</th>
        <th> Header 2</th>
        <th> Header 3</th>
    </thead>
    <tbody>
        <tr>
            <td>
                <div style="width: 50; height:30; overflow-y: scroll"> 
                    Tklasdjf alksjf asjdfk jsadfl kajsdl fjasdk fljsaldk 
                    fjlksa djflkasjdflkjsadlkf jsakldjfasdjfklasjdflkjasdlkfjaslkdfjasdf
                </div>
            </td>
            <td>
                Hello world
            </td>
            <td> Hello world2
        </tr>
    </tbody>
</table>

Ответ 13

Вот хороший плагин jQuery, работающий во всех браузерах!

У вас есть фиксированная таблица заголовков без фиксации ее ширины.

Отметьте: https://github.com/benjaminleouzon/tablefixedheader

Отказ от ответственности: я являюсь автором плагина.