Заголовок замороженной таблицы внутри прокручиваемого div - PullRequest
Новая
       28

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

8 голосов
/ 28 января 2009

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

Ответы [ 11 ]

13 голосов
/ 07 октября 2009

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

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

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

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

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

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

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

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

12 голосов
/ 08 января 2012

Решение действительно простое. Вам нужно 3 DIV: общий контейнер (в моем случае класса «external»), контейнер таблицы (в моем случае класса «inner») и DIV, в котором вы делаете клон существующей таблицы, используя jQuery или javaScript в моем случае класса "заголовок").

Решение использует CSS и несколько строк кода jQuery, который клонирует HTML «inner» в «header» и устанавливает его ширину и высоту. Поддерживает фиксированную и переменную ширину столбцов. Протестировано с IE8, Firefox 9, Safari и Google Chrome.

Вот пример кода: 

    	$(document).ready(function() {
    		$('.header').html( $('.inner').html() );
    		$('.header').css('width', $('.inner table').outerWidth() );
    		$('.header').css('height', $('.inner table thead').outerHeight() );
    	});
table {
  width:100%;
}
th {
  border-top:1px solid #999;
  text-align:left;
}
td, th {
  border-bottom:1px solid #999;
  background-color:#EEE;
}
.outer {
  position:relative;
  width:500px;
}
.inner {
  height:150px;
  overflow:auto;
}
.header {
  position:absolute;
  top:0;
  left:0;
  overflow:hidden;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<body>
<div class="outer">
  <div class="inner">
    <table cellspacing="0" cellpadding="0">
      <thead>
        <tr>
          <th>a</th>
          <th>b</th>
          <th>c</th>
          <th>d</th>
        </tr>
      </thead>
      <tbody>
        <tr><td>1</td><td>b</td><td>c</td><td>d</td></tr>
        <tr><td>2</td><td>b</td><td>c</td><td>d</td></tr>
        <tr><td>3</td><td>b</td><td>c</td><td>d</td></tr>
        <tr><td>4</td><td>b</td><td>c</td><td>d</td></tr>
        <tr><td>5</td><td>b</td><td>c</td><td>d</td></tr>
        <tr><td>6</td><td>b</td><td>c</td><td>d</td></tr>
        <tr><td>7</td><td>b</td><td>c</td><td>d</td></tr>
        <tr><td>8</td><td>b</td><td>c</td><td>d</td></tr>
        <tr><td>9</td><td>b</td><td>c</td><td>d</td></tr>
        <tr><td>10</td><td>b</td><td>c</td><td>d</td></tr>
        <tr><td>11</td><td>b</td><td>c</td><td>d</td></tr>
        <tr><td>12</td><td>b</td><td>c</td><td>d</td></tr>
      </tbody>
    </table>
  </div>

  <div class="header">
  </div>

</div>
</body>
11 голосов
/ 31 января 2009

Вот базовое решение с использованием JavaScript: 

function position(table) {
    table.rows[0].style.position="absolute";
    table.rows[0].style.top="0px";
    table.style.marginTop = table.rows[0].clientHeight/1.2;
    var widths = Array();
    for(var i = 0; i < table.rows[0].cells.length; i++) {
        widths[i] = max(table.rows[0].cells[i].clientWidth, table.rows[1].cells[i].clientWidth);
    }
    for(var row = 0; row < table.rows.length; row++) {
        for(var col = 0; col < widths.length; col ++) {
            table.rows[row].cells[col].style.width = widths[col] + "px";
        }
    }
}

function max(num1, num2) { return (num1 > num2) ? num1 : num2; }
3 голосов
/ 28 января 2009

Вы должны поместить заголовок за пределы прокручиваемого div. Все внутри div будет прокручиваться.

EDIT

Что касается ширины, если вы выберете отдельный заголовок, я вижу несколько решений:

  • Предполагая, что это динамический контент, генерируйте «фиксированную» ширину на основе длины строки. Очевидно, укажите в терминах EM и оставьте некоторое поле для ошибки.
  • Использовать JavaScript.
  • Использовать столбцы фиксированной ширины.

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

Я должен также упомянуть, что, вероятно, есть библиотеки javascript с табличными виджетами, которые уже делают это. Посмотрите на них, чтобы увидеть, как они это делают.

2 голосов
/ 04 февраля 2009

На самом деле вы хотите сделать прокрутку <tbody> таблицы данных, поэтому <thead> и <tfoot> останутся неизменными.

Хотя для FF и т. Д. Это тривиально: 

tbody
{
    height: 100px; /* or whatever */
    overflow: auto;
    overflow-y: auto;
    overflow-x: hidden;
}

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

2 голосов
/ 04 февраля 2009

Вы можете попробовать плагин jQuery Stupid Fixed Header . Техника в основном та же: клонировать заголовок и поместить его поверх слоя таблицы.

2 голосов
/ 31 января 2009

Вот хорошее решение (в основном CSS), которое использует столбцы фиксированной ширины: http://www.imaputz.com/cssStuff/bulletVersion.html

А вот немного кода jQuery для исправления ширины ячейки, когда содержимое ячейки занимает большую ширину, чем фиксированная ширина: 

<script
  src="http://ajax.googleapis.com/ajax/libs/jquery/1.3.1/jquery.min.js"
  type="text/javascript"></script>
<script>
$(function() {
  $('div.tableContainer').each(function() { // for each table
    var div = $(this);
    var widths = [];
    var changed = false;
    $('table>*>tr', div).each(function(tr_i) {
      $(this).children().each(function(i) {
        var w = $(this).width();
        if (w > widths[i]) {
            widths[i] = w;
            changed = true;
        }
      });
    }).each(function(tr_i) {
      if (changed)
      $(this).children().each(function(i) {
        var width = widths[i];
        // add some width for scrollbar
        if (tr_i == 0 && changed && i == widths.length-1) width += 16;
        // insert a div to ensure width
        $(this).append('<div style="width:'+width+'px; height:0px">&nbsp;</div>');
      });
    });
    div.width(div.children('table').width()).css('overflow-x', 'hidden');
  });
});
</script>

Вывод немного отключен в IE при использовании нестрогого DTD. Отрегулируйте ширину в CSS, если вы не можете использовать стандартный режим.

Обратите внимание, что код jQuery увеличивает ширину таблицы в конце и отключает горизонтальную полосу прокрутки. Вы можете или не можете этого хотеть.

2 голосов
/ 28 января 2009

Вам нужно поставить таблицу с заголовками о вашей таблице данных. Вы можете поддерживать ширину столбца с помощью таблицы-макета: исправлено. JavaScript можно использовать для соответствия ширине столбца.

1 голос
/ 04 февраля 2009

Это решение работает с использованием CSS в Firefox и других браузерах Gecko и выражений CSS в IE.

http://home.tampabay.rr.com/bmerkey/examples/nonscroll-table-header.html

Верхний и нижний колонтитулы не остаются фиксированными в Opera или Safari / Chrome, но всю таблицу можно прокручивать, поэтому ее можно использовать. Обратите внимание, что столбцы имеют процентную ширину в примере автора, но их можно удалить.

Если вы хотите поэкспериментировать с поддержкой Opera / Safari / Chrome, посмотрите на отображение tbody: block и перейдите оттуда.

1 голос
/ 04 февраля 2009

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

Похоже, есть хитрости, необходимые для исправления ширины столбца. Если я правильно помню, Firefox требует наличия тегов

.

В любом случае в YUI DataTable было много трюков (50 000 строк). Вам бы посоветовали взглянуть на это и решить, как далеко вы хотели бы пройти самостоятельно.

Страница:
Добро пожаловать на сайт PullRequest, где вы можете задавать вопросы и получать ответы от других членов сообщества.

Нет похожих вопросов

...