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

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

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

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

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

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

10
css html html-table javascript

6 ответов

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

8

Я только что собрал плагин 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

9

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

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

Примечание при обновлении и изменении размера данных заголовок идеально совпадает. Вот в чем фокус.

3

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

2

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

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

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

1