it-swarm.com.ru

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

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

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

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

56
koogunmo

Рабочий пример ссылка опубликована 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 могут потребоваться некоторые корректировки высоты строк).

19
acatalept

плагин jQuery DataTables - это один из отличных способов получения фиксированных столбцов и столбцов, подобных 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 )

3
mg1075

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

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

2
green_t

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

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

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

2
raveren

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

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

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

1
levik

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

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

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

1
Marco Demaio

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

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

0
Shahib

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

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