Таблица - фиксированный заголовок, прокручиваемое тело, самое надежное /простое решение? [Дубликат]

  

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

Ищите решение для создания таблицы с прокручиваемым телом и статическим /фиксированным заголовком.

Поиск вокруг приводит к появлению MANY нестабильных фрагментов кода, либо не работающих в IE, требующих огромного количества Javascript и подстройки, либо глупого количества хаков CSS и т. д.

Честно говоря, если это случай хаков CSS или Javascript, я думаю, что предпочел бы перейти к опции Javascript.

Альтернатива, я полагаю, состоит в том, чтобы поместить все это в div и просто прокрутить всю таблицу - но это немного не так: D

10 голосов | спросил Nick 19 PM00000080000000831 2009, 20:18:08

4 ответа


0
<table style="width: 300px" cellpadding="0" cellspacing="0">
<tr>
  <td>Column 1</td>
  <td>Column 2</td>
</tr>
</table>

<div style="overflow: auto;height: 100px; width: 320px;">
  <table style="width: 300px;" cellpadding="0" cellspacing="0">
  <tr>
    <td>Value 1</td>
    <td>Value 2</td>
  </tr>
  <tr>
    <td>Value 1</td>
    <td>Value 2</td>
  </tr>
  <tr>
    <td>Value 1</td>
    <td>Value 2</td>
  </tr>
  <tr>
    <td>Value 1</td>
    <td>Value 2</td>
  </tr>
  <tr>
    <td>Value 1</td>
    <td>Value 2</td>
  </tr>
  <tr>
    <td>Value 1</td>
    <td>Value 2</td>
  </tr>
  </table>
</div>

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

Ширина внешнего элемента должна быть больше ширины, если внутренняя таблица должна соответствовать полосе прокрутки. Это может быть трудно сделать совершенно правильно, потому что некоторые пользователи, возможно, установили свои полосы прокрутки, чтобы быть шире или меньше, чем по умолчанию. Однако с разницей в 20-30 пикселей вы обычно сможете отображать полосу прокрутки очень хорошо.

CSS-Tricks также рассказывает об использовании JavaScript и CSS, чтобы помочь с этим, чтобы вы могли использовать подсветку. Вот ссылка на эту статью .

ответил Dennis 19 PM00000080000001031 2009, 20:26:10
0

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

Все, что требуется, - это таблица, в которой есть thead и tbody.

Вы можете обернуть эту таблицу в DIV именем класса, и размер таблицы всегда будет изменяться в соответствии с этим div. так, например, если ваш div масштабируется с окном браузера, то будет и таблица. Заголовок будет исправлен при прокрутке. Нижний колонтитул будет исправлен (если вы включите нижний колонтитул). У вас также есть возможность клонировать заголовок в нижнем колонтитуле и исправить его. Кроме того, если вы сделаете окно браузера слишком маленьким, а все столбцы не поместятся ... оно также будет прокручиваться горизонтально (заголовок тоже).

Этот плагин позволяет браузеру изменять размер столбцов, чтобы они не были столбцами фиксированной ширины.

вы просто передаете имя класса DIV плагину следующим образом: $ ('. myDiv'). fixedHeaderTable ({footer: true, footerId: 'myFooterId'}); и плагин сделает все остальное. FooterID - это элемент на странице, который содержит разметку для вашего нижнего колонтитула. это используется, если вы хотите использовать пагинацию в качестве нижнего колонтитула.

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

проверьте это здесь: http://fixedheadertable.mmalek.com/

Имейте в виду, что это все еще бета-версия, поэтому я ежедневно добавляю новые функции и исправления ошибок.

Поддерживаемые браузеры: IE6, IE7, IE8, FireFox, Safari и Chrome

Вот ссылка на мой ответ другому человеку, у которого был такой же вопрос: Замороженный заголовок таблицы внутри прокручиваемого div

ответил Mark 7 +04002009-10-07T23:22:39+04:00312009bEurope/MoscowWed, 07 Oct 2009 23:22:39 +0400 2009, 23:22:39
0

Я считаю, что решение состоит в том, чтобы установить явную высоту для тела и установить переполнение на auto или scroll. К сожалению, как вы обнаружили, таблицы и CSS - сложная комбинация, и IE любит их задушить.

ответил Thom Smith 19 PM00000080000005131 2009, 20:21:51
0

Как насчет этого?

<table style="width: 400px;"> 
<thead><tr> <th> head </th> </tr>
</thead>
<tbody style="height: 100px; overflow-y: auto; overflow-x: hidden;">
<tr> <th> .. </th> </tr>
</tbody>
</table>
ответил goth 26 Maypm11 2011, 22:34:53

Похожие вопросы

Популярные теги

security × 330linux × 316macos × 2827 × 268performance × 244command-line × 241sql-server × 235joomla-3.x × 222java × 189c++ × 186windows × 180cisco × 168bash × 158c# × 142gmail × 139arduino-uno × 139javascript × 134ssh × 133seo × 132mysql × 132