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

Question

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

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

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

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

63

javascript html css html-table

Источник

user344664 26 мар '09 в 01:40

13 ответов

Другие вопросы по тегам javascript html css html-table

user160124 20 авг '09 в 15:27 2009-08-20 15:27 · Answer 1 · 2009-08-20 15:27

Рабочий пример ссылки, размещенной pranav:

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

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

РЕДАКТИРОВАТЬ 5/5/14: перенес пример в jsBin. Это старый, но удивительно все еще работает в современных Chrome, IE и Firefox (хотя IE и Firefox могут потребовать некоторые корректировки высоты строк).

user538962 13 июл '13 в 18:41 2013-07-13 18:41 · Answer 2 · 2013-07-13 18:41

Плагин 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)

user179104 13 авг '10 в 14:43 2010-08-13 14:43 · Answer 3 · 2010-08-13 14:43

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

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

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

2

Источник

user179104 13 авг '10 в 14:43

user17329 03 апр '09 в 15:05 2009-04-03 15:05 · Answer 4 · 2009-04-03 15:05

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

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

2

Источник

user17329 03 апр '09 в 15:05

user260080 24 авг '10 в 17:21 2010-08-24 17:21 · Answer 5 · 2010-08-24 17:21

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

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

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

1

Источник

user260080 24 авг '10 в 17:21

user4465 26 мар '09 в 05:40 2009-03-26 05:40 · Answer 6 · 2009-03-26 05:40

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

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

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

user248903 27 фев '12 в 04:05 2012-02-27 04:05 · Answer 7 · 2012-02-27 04:05

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

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

0

Источник

user248903 27 фев '12 в 04:05

user678328 28 окт '11 в 18:37 2011-10-28 18:37 · Answer 8 · 2011-10-28 18:37

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

0

Источник

user678328 28 окт '11 в 18:37

user462225 29 сен '10 в 20:30 2010-09-29 20:30 · Answer 9 · 2010-09-29 20:30

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

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

user62970 26 мар '09 в 01:45 2009-03-26 01:45 · Answer 10 · 2009-03-26 01:45

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

-2

Источник

user62970 26 мар '09 в 01:45

user32812 26 мар '09 в 02:00 2009-03-26 02:00 · Answer 11 · 2009-03-26 02:00

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

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