Заголовки таблиц HTML всегда видны в верхней части окна при просмотре большой таблицы

Я'ве сделали доказательство концепции решения, используя библиотеку jQuery.

Образец зрения.

Я'теперь ве получил этот код в Меркуриал репозиторий системе Bitbucket. Основной файл tables.html.

Я'м курсе одна проблема с этим: если таблица содержит якорей, и если вы открываете URL-адрес с указанным якорь в браузере, при загрузке страницы, строка с якорем, вероятно, будет закрыт плавающего заголовка.

Обновление 2017-12-11: я вижу, что это не't работа с текущей версии Firefox (57) и хром (63). Не знаю, когда и почему это перестало работать, или как исправить ее. Но теперь, я думаю, что принято отвечать на Irawan Хенди выше.

Крейг, я улучшил ваш код немного (среди нескольких других вещей, это's теперь, используя установки:фиксированной) и завернула его как плагин jQuery.

Попробовать это здесь: http://jsfiddle.net/jmosbech/stFcx/

И вот вам источник: https://github.com/jmosbech/StickyTableHeaders

Проверить для jQuery.floatThead (демо доступно) и это очень круто, можно работать с таблицами]2, и может работать даже внутри `переполнение: авто-футовый контейнер.

Если вы're пристреливая современные CSS3 с совместимыми браузерами (поддержка браузера: https://caniuse.com/#feat=css-sticky) можно использовать положение:липкий, который не'т требует JS и выиграл'т сломать сервировки стола Мисс-выравнивая Th и TD в одной колонке. И не требует ширина фиксированного столбца, чтобы работать должным образом.

Пример для одной строки заголовка:

thead th
{
    position: sticky;
    top: 0px;
}

Для theads с 1 или 2 строки, вы можете использовать что-то вроде этого:

thead > :last-child th
{
    position: sticky;
    top: 30px; /* This is for all the the "th" elements in the second row, (in this casa is the last child element into the thead) */
}

thead > :first-child th
{
    position: sticky;
    top: 0px; /* This is for all the the "th" elements in the first child row */
}

Возможно, вам придется поиграть немного с топ собственность последнего ребенка, изменяя количество пикселей, чтобы соответствовать высоте первого ряда (+ маржа + границы + прокладки, если таковые имеются), так что второй ряд палочек просто вниз ниже первого.

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

Зачем использовать последний ребенок до и детьми после в CSS?

Потому что правила CSS будут отображаться браузером в том же порядке, как вы записали их в CSS-файл и из-за этого, если у вас есть только 1 строку на элементы thead элемент первого ряда-это одновременно и последней строки и первого ребенка нужно переопределить последний ребенок. Если не вы будете иметь смещение строки на 30 пикселей от верхнего поля, который я предполагаю, что вы Дон'т хотите.

Известной проблемой установки: липкое, что он не't работа на потока элементов или строк таблицы: следует ориентироваться на элементы Th. Скока эта проблема будет решена в будущих версиях браузера.

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

    oh hai


    <table id="tableHeader">
        <tr>
            <th style="width:100px; background-color:#CCCCCC">col header</th>
            <th style="width:100px; background-color:#CCCCCC">col header</th>
        </tr>
    </table>
    <div style="height:50px; overflow:auto; width:250px">
        <table>
            <tr>
                <td style="height:50px; width:100px; background-color:#DDDDDD">data1</td>
                <td style="height:50px; width:100px; background-color:#DDDDDD">data1</td>
            </tr>
            <tr>
                <td style="height:50px; width:100px; background-color:#DDDDDD">data2</td>
                <td style="height:50px; width:100px; background-color:#DDDDDD">data2</td>
            </tr>
        </table>
    </div>

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

Почитайте на overflow propriety, чтобы понять, подходит ли это для ваших нужд.

Возможны варианты

ПЛ-с плавающей таблица-заголовки

Яш-с плавающей таблица-заголовки (код Google)

В Друпал

У меня есть сайт на Drupal 6. Я был на админке, что "модули" на странице, и заметил, что на столах было это точная характеристика!

Глядя на код, кажется, быть реализованы файл с названием tableheader.js. Она применяет функцию на все таблицы с классом `липкие включена.

Для сайта на Друпале, я'd как, чтобы иметь возможность воспользоваться этим tableheader.js модуль как есть для пользовательского контента. tableheader.js Не'т, кажется, чтобы присутствовать на веб-страницах пользователей в Drupal. Я разместил форум, чтобы спросить, как изменить тему для Drupal, так это's доступный. По данным ответом, tableheader.js могут быть добавлены в темы Drupal с помощью drupal_add_js () на тему'ыtemplate.php` следующим образом:

drupal_add_js('misc/tableheader.js', 'core');

Это действительно сложная вещь, чтобы иметь липкий заголовок на вашем столе. У меня же требование, но с в ASP:GridView С а потом я нашел это на самом деле полагают, липкий заголовок таблицы. Существует много решений, и это заняло у меня 3 дня все решения, но никто из них не мог удовлетворить.

Главная проблема, что я столкнулся с большинством из этих решений была проблема выравнивания. Когда вы пытаетесь сделать заголовке плавающей, то выравнивание заголовка ячейки и клетки тела уходит в другое русло.

С некоторыми решениями у меня есть проблема получения заголовка наложились на первые несколько строк из тела, которые вызывают строк тела становятся скрыты за плавающего заголовка.

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

Ниже приведен пример таблицы.

<div class="table-holder">
        <table id="MyTable" cellpadding="4" cellspacing="0" border="1px" class="customerTable">
            <thead>
                <tr><th>ID</th><th>First Name</th><th>Last Name</th><th>DOB</th><th>Place</th></tr>
            </thead>
            <tbody>
                <tr><td>1</td><td>Customer1</td><td>LastName</td><td>1-1-1</td><td>SUN</td></tr>
                <tr><td>2</td><td>Customer2</td><td>LastName</td><td>2-2-2</td><td>Earth</td></tr>
                <tr><td>3</td><td>Customer3</td><td>LastName</td><td>3-3-3</td><td>Mars</td></tr>
                <tr><td>4</td><td>Customer4</td><td>LastName</td><td>4-4-4</td><td>Venus</td></tr>
                <tr><td>5</td><td>Customer5</td><td>LastName</td><td>5-5-5</td><td>Saturn</td></tr>
                <tr><td>6</td><td>Customer6</td><td>LastName</td><td>6-6-6</td><td>Jupitor</td></tr>
                <tr><td>7</td><td>Customer7</td><td>LastName</td><td>7-7-7</td><td>Mercury</td></tr>
                <tr><td>8</td><td>Customer8</td><td>LastName</td><td>8-8-8</td><td>Moon</td></tr>
                <tr><td>9</td><td>Customer9</td><td>LastName</td><td>9-9-9</td><td>Uranus</td></tr>
                <tr><td>10</td><td>Customer10</td><td>LastName</td><td>10-10-10</td><td>Neptune</td></tr>
            </tbody>
        </table>
    </div>

Примечание: таблица обернут в DIV с атрибутом Class равным 'стол-держатель'.

Ниже приведен скрипт jQuery, который я добавил в мой заголовок HTML-страницы.

<script src="../Scripts/jquery-1.7.2.min.js" type="text/javascript"></script>
<script src="../Scripts/jquery-ui.min.js" type="text/javascript"></script>
<script type="text/javascript">
    $(document).ready(function () {
        //create var for table holder
        var originalTableHolder = $(".table-holder");
        // set the table holder's with
        originalTableHolder.width($('table', originalTableHolder).width() + 17);
        // Create a clone of table holder DIV
        var clonedtableHolder = originalTableHolder.clone();

        // Calculate height of all header rows.
        var headerHeight = 0;
        $('thead', originalTableHolder).each(function (index, element) {
            headerHeight = headerHeight + $(element).height();
        });

        // Set the position of cloned table so that cloned table overlapped the original
        clonedtableHolder.css('position', 'relative');
        clonedtableHolder.css('top', headerHeight + 'px');

        // Set the height of cloned header equal to header height only so that body is not visible of cloned header
        clonedtableHolder.height(headerHeight);
        clonedtableHolder.css('overflow', 'hidden');

        // reset the ID attribute of each element in cloned table
        $('*', clonedtableHolder).each(function (index, element) {
            if ($(element).attr('id')) {
                $(element).attr('id', $(element).attr('id') + '_Cloned');
            }
        });

        originalTableHolder.css('border-bottom', '1px solid #aaa');

        // Place the cloned table holder before original one
        originalTableHolder.before(clonedtableHolder);
    });
</script>

и, наконец, ниже находится класс CSS для целей окрашивания.

.table-holder
{
    height:200px;
    overflow:auto;
    border-width:0px;    
}

.customerTable thead
{
    background: #4b6c9e;        
    color:White;
}

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

Же решение работает для ASP:GridView для работы, нужно добавить еще два шага, чтобы достичь этого в GridView в,

1. В onprerender событие объекта GridView в вашу веб-страницу, установите секции таблице строку заголовка равна TableHeader.

если (это.Строку заголовка != значение null) { это.Строку заголовка.TableSection = TableRowSection.TableHeader; }

2. И обернуть сетки на в <div с классом="и столик-держатель" и></дел>.

Примечание: если ваш заголовок имеет элементы управления, то вам может понадобиться, чтобы добавить некоторые jQuery скрипт, чтобы передать события в клонированной головой исходный заголовок. Этот код уже доступен в jQuery липкий заголовка плагина создать [jmosbech][1]

Если вы используете полноэкранную таблицу, возможно, вам стоит установить th в display:fixed; и top:0; или попробовать очень похожий подход с помощью css.

Обновление

Просто быстро создайте рабочее решение с iframe (html4.0). Этот пример НЕ соответствует стандарту, однако вы легко сможете его исправить:

outer.html

<?xml version='1.0' encoding='UTF-8'?>



        <meta http-equiv="Content-Type" content="text/html; charset=UTF-8" /> 
        Outer

test.html

<?xml version='1.0' encoding='UTF-8'?>



        <meta http-equiv="Content-Type" content="text/html; charset=UTF-8" /> 
        Floating

      .content{
        position:relative; 
      }

      thead{
        background-color:red;
        position:fixed; 
        top:0;
      }


    <div class="content">      
      <table>
        <thead>
          <tr class="top"><td>Title</td></tr>

        <tbody>
          <tr><td>a</td></tr>
          <tr><td>b</td></tr>
          <tr><td>c</td></tr>
          <tr><td>d</td></tr>
          <tr><td>e</td></tr>
          <tr><td>e</td></tr>
          <tr><td>e</td></tr>
          <tr><td>e</td></tr>
          <tr><td>e</td></tr>
          <tr><td>e</td></tr>
        </tbody>
      </table>
    </div>

Использование display: fixed в секции thead должно сработать, но чтобы оно работало только для текущей таблицы в режиме просмотра, вам понадобится помощь JavaScript. И это будет непросто, потому что ему нужно будет определить места прокрутки и расположение элементов относительно области просмотра, что является одной из основных областей несовместимости браузеров.

Посмотрите на популярные JavaScript-фреймворки (jQuery, MooTools, YUI и т.д. и т.п.), чтобы понять, могут ли они сделать то, что вы хотите, или облегчить выполнение того, что вы хотите.

Это'ы расстраивает то, что прекрасно работает в одном браузере не't работа в других. Следующий работает в Firefox, но не в Chrome или IE:

<table width="80%">

 <thead>

 <tr>
  <th>Column 1</th>
  <th>Column 2</th>
  <th>Column 3</th>
 </tr>

 </thead>

 <tbody style="height:50px; overflow:auto">

  <tr>
    <td>Cell A1</td>
    <td>Cell B1</td>
    <td>Cell C1</td>
  </tr>

  <tr>
    <td>Cell A2</td>
    <td>Cell B2</td>
    <td>Cell C2</td>
  </tr>

  <tr>
    <td>Cell A3</td>
    <td>Cell B3</td>
    <td>Cell C3</td>
  </tr>

 </tbody>

</table>

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