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

Question

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

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

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

Answer 1

Я знаю, что вы можете do it for MSIE и this limited example, похоже, работает для firefox (не уверен, насколько расширяем технику).

Answer 2

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

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

Answer 3

Если то, что вы хотите, чтобы заголовки остаются на месте в то время как данные в таблице прокручивается по вертикали, вы должны реализовать < TBODY > стилизованы «перелив-у: авто», как это:

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

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

Answer 4

YUI DataTable

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

Answer 5

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

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

Answer 6

Рабочий пример link posted by pranav:

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

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

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

Answer 7

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

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

Он просто работает без настройки и очень проста в установке.

Answer 8

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

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

Проверьте это: https://github.com/benjaminleouzon/tablefixedheader

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

Answer 9

В этом ответе есть также лучший ответ, который я нашел на ваш вопрос:

HTML table with fixed headers?

и на основе чистого CSS.

Answer 10

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

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

Answer 11

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

Answer 12

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

двух разных таблиц, один с заголовком, а другой, завернутые с 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> 

Answer 13

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

Обратите внимание на раздел примеров сайта и «дополнительные услуги».
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)