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

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

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

Поиск вокруг, кажется, производит МНОГИЕ фрагменты кода, либо не работающие в IE, требующие огромного количества Javascript и настройки, или глупое количество хакеров CSS и т.д.

Если честно, если это случай с CSS-хаками или Javascript, я думаю, что я предпочел бы использовать параметр Javascript.

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

ОТВЕТЫ

Ответ 1

<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, чтобы помочь в этом, поэтому вы можете использовать подсветку. Вот ссылка на статью .

Ответ 2

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

Все, что требуется, это таблица с ада и тэгом.

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

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

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

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

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

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

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

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

Ответ 3

Если вы можете исправить ширину столбцов - это намного проще. Если вы хотите, чтобы браузер определил ширину, это становится намного сложнее. В принципе, есть таблица в div, которая прокручивает (высота, переполнение: авто) и имеет этот div внутри позиции: относительный div. В внешнем div есть другая позиция div: абсолютная, переполнение: скрытая, высота: независимо от высоты заголовка, установите этот div innerHTML в innerHTML внутреннего div; Вот страница, которая демонстрирует. Есть много gotchas, но это выполнимо...

<html>
<head></head>
<body onload="doit();">
<div id="outer" style="position:relative;">
  <div id="inner" style="height:100px; overflow:auto;">
    <script>
       var html = '<table><tr><th>Heading 1</th><th>Heading 2</th></tr>';
       var width = Math.floor(Math.random() * 100);
       var d = '';
       for(var i = 0; i < width; i++){d += 'a';}
       for(var i = 0; i < 100; i++){
          html += '<tr><td>' + d + '</td><td>some more data</td>';
       }
       html += '</table>';
       document.write(html);
    </script>
  </div>
  <div id="secondWrapper" style="position:absolute; background:#fff; left:0; top:0; height:25px; overflow:hidden;"></div>
</div>

<script>
function doit(){
  var inner = document.getElementById('inner');
  var secondWrapper = document.getElementById('secondWrapper');
  secondWrapper.innerHTML = inner.innerHTML; 
}
</script>
</body>
</html>

Обратите внимание, что при обновлении и изменении размера данных заголовок идеально подходит. Это настоящий трюк.

Ответ 4

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

Ответ 5

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

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

Ответ 6

Была также опрос для такого рода вещей на Sitepoint, для тех, кто ищет решение, отличное от JS. Однако я обнаружил, что нижний колонтитул таблицы необходим для того, чтобы остановить заголовки таблиц от развала их ширины, если содержимое ячеек недостаточно велико. Я закончил тем, что скрывал tfoot в приложении, в котором я использовал это.
Это чистый HTML/CSS и работает в IE6 плюс современные браузеры. Есть некоторые ограничения стиля для заголовка, хотя.