Как я могу позволить телу прокручивать тело, но держать его неподвижно на месте?

148

Я пишу страницу, где мне нужна таблица HTML для поддержания заданного размера. Мне нужны заголовки в верхней части таблицы, чтобы они всегда оставались там, но мне также нужно прокручивать тело таблицы независимо от того, сколько строк добавлено в таблицу. Вспомните мини-версию Excel. Это кажется простой задачей, но почти каждое решение, которое я нашел в Интернете, имеет некоторый недостаток. Как я могу решить это?

javascript  html  css  html-table 
— мятный
источник
2
Есть много примеров там. этот один из них .
— Даррен Копп
Мне нужно нацелиться на IE6, IE7, FF, ... но особенно на IE, к сожалению
— minty
Там много CSS-хаков. Работать в IE7 должно быть тривиально.
— Джим
4
Я заинтересован в ответе для всех браузеров!
— minty
15
«Это должно быть тривиально, чтобы работать в IE7». Джим, это ты? Ты мой руководитель проекта? :)
— Аарониус

Ответы:

53

Я должен был найти тот же ответ. Лучший пример, который я нашел, это http://www.cssplay.co.uk/menu/tablescroll.html - я обнаружил, что пример №2 хорошо сработал для меня. Вам придется установить высоту внутренней таблицы с помощью Java Script, остальное - CSS.

— Кен Пенн
источник
3
к сожалению, этот метод не работает, когда у вас широкая таблица (горизонтальная прокрутка). У вас будет две горизонтальные полосы прокрутки; один для заголовка и один для данных.
— Vol7ron
4
ваше решение не будет работать, если вы не укажете <th> ширину внутри <thead>
— Alexandru R
2
Чтобы соответствовать (относительно) новым стандартам переполнения стека, не могли бы вы отредактировать этот ответ, включив в него соответствующие биты из ссылки?
— Фонд Моника судебный процесс
Где источник, Билли?
— подсвечник
Невозможно синхронизировать ширину столбцов между заголовком и (прокручиваемым) телом таблицы, не прибегая к JavaScript или предопределенным значениям.
— rustyx
12

Я увидел отличное решение Шона Хэдди для подобного вопроса и позволил себе внести некоторые изменения :

  • Используйте классы вместо ID, чтобы один сценарий jQuery можно было повторно использовать для нескольких таблиц на одной странице
  • Добавлена ​​поддержка семантических элементов таблицы HTML, таких как caption, thead, tfoot и tbody
  • Добавлена ​​опция полосы прокрутки, чтобы она не отображалась для таблиц, которые «короче» высоты прокрутки
  • Изменена ширина прокрутки div, чтобы полоса прокрутки доходила до правого края таблицы.
  • Сделал концепцию доступной
    • использование aria-hidden = "true" для вставленного статического заголовка таблицы
    • и оставив оригинальную thead на месте, просто скрытый с помощью jQuery и установить aria-hidden="false"
  • Показаны примеры нескольких таблиц с разными размерами

Шон сделал тяжелую работу, хотя. Спасибо Мэтту Берленду за то, что он указал на необходимость поддержки tfoot.

Пожалуйста, убедитесь сами на http://jsfiddle.net/jhfrench/eNP2N/

— Джером Френч
источник
Хорошо, но он облажается, если вы хотите верхний и нижний колонтитулы!
— Мэтт Берлэнд
3
Спасибо Мэтт, я сделал корректировку.
— Джером Френч
Выравнивание нуждается в настройке, если вы показываете td и th границы.
— Дхочее
8

Вы пробовали использовать thead и tbody и устанавливать фиксированную высоту на tbody с помощью overflow: scroll?

Какие у вас целевые браузеры?

РЕДАКТИРОВАТЬ: Это работало хорошо (почти) в Firefox - добавление вертикальной полосы прокрутки также вызвало необходимость горизонтальной полосы прокрутки - гадость. IE просто устанавливает высоту каждого td на то, что я указал высоту tbody. Вот лучшее, что я мог придумать:

<html>
    <head>
    <title>Blah</title>
    <style type="text/css">
    table { width:300px; }
    tbody { height:10em;  overflow:scroll;}
    td { height:auto; }
    </style>
    </head>
    <body>
    <table>
        <thead>
            <tr>
              <th>One</th><th>Two</th>
              </td>
            </tr>
        </thead>
        <tbody>
            <tr><td>Data</td><td>Data</td></tr>
            <tr><td>Data</td><td>Data</td></tr>
            <tr><td>Data</td><td>Data</td></tr>
            <tr><td>Data</td><td>Data</td></tr>
            <tr><td>Data</td><td>Data</td></tr>
            <tr><td>Data</td><td>Data</td></tr>
            <tr><td>Data</td><td>Data</td></tr>
            <tr><td>Data</td><td>Data</td></tr>
            <tr><td>Data</td><td>Data</td></tr>
            <tr><td>Data</td><td>Data</td></tr>
            <tr><td>Data</td><td>Data</td></tr>
            <tr><td>Data</td><td>Data</td></tr>
            <tr><td>Data</td><td>Data</td></tr>
            <tr><td>Data</td><td>Data</td></tr>
            <tr><td>Data</td><td>Data</td></tr>
        </tbody>
    </table>
    </body>
</html>
— Крис Марасти-Георг
источник
1
Мне нужно нацелиться на IE6, IE7, FF, ... но особенно на IE, к сожалению
— minty
Измените таблицу так, чтобы она была шириной менее 100%, скажем, 99%, и это должно решить проблему
— WolfmanDragon
2
overflow-x: hidden;а overflow-y: autoтакже помочь.
— Юстект
7
Раньше это работало в Firefox, и это очевидный и не хитрый код. Однако в более поздних версиях Firefox он не работает.
— Расмус Кай
6
Это не работает, потому что «переполнение» применимо только к «блочным контейнерам» ( w3.org/TR/CSS21/visufx.html#overflow ), а блоки таблиц не являются «блочными контейнерами» ( w3.org/TR/CSS21/ visuren.html # block-box ).
— mhsmith
8

Что вам нужно это:

1) иметь тело таблицы ограниченной высоты, поскольку прокрутка происходит только тогда, когда содержимое больше, чем окно прокрутки. Однако tbodyразмер не может быть измерен, и вы должны отобразить его как block:

tbody {
   overflow-y: auto;
   display: block;
   max-height: 10em;    // For example
}

2) Повторно синхронизируйте ширину столбцов заголовка таблицы и тела таблицы, так как создание последнего blockэлемента a сделало его несвязанным элементом. Единственный способ сделать это - симулировать синхронизацию, применяя одинаковую ширину столбцов к обоим .

Тем не менее, так как tbodyсам по себе является blockсейчас, он больше не может вести себя как table. Поскольку вам все еще нужно tableповедение для правильного отображения ваших столбцов, решение состоит в том, чтобы запросить отображение каждой из ваших строк в виде отдельных tables:

thead {         
   display: table;  
   width: 100%;     // Fill the containing table
}
tbody tr {
   display: table;
   width: 100%;     // Fill the containing table
}

(Обратите внимание, что, используя эту технику, вы больше не сможете охватывать строки).

Как только это сделано, вы можете применять ширину столбцов , чтобы иметь такую же ширину , как theadи tbody. Вы не могли этого:

  • индивидуально для каждого столбца (с помощью определенных классов CSS или встроенного стиля), что довольно утомительно для каждого экземпляра таблицы;
  • равномерно для всех столбцов (через th, td { width: 20%; } если у вас есть 5 столбцов), что более практично (нет необходимости устанавливать ширину для каждого экземпляра таблицы), но не может работать для любого количества столбцов
  • равномерно для любого количества столбцов, с помощью фиксированного макета таблицы.

Я предпочитаю последний вариант, который требует добавления:

thead {
   table-layout: fixed;   // Same layout for all cells
}
tbody tr {
   table-layout: fixed;   // Same layout for all cells
}
th, td {
   width: auto;   // Same width for all cells, if table has fixed layout
}

Смотрите демо здесь , разветвленный от ответа на этот вопрос .

— Javarome
источник
Спасибо за объяснение. Обманчиво, как много способов сделать что-то подобное, и большинство ответов просто представляют некоторый код и ссылку на plunkr, оставляя вас самим в этом разобраться.
— Пол Руни
4

Изменить:   Это очень старый ответ, и он здесь для процветания, просто чтобы показать, что он был когда-то поддержан еще в 2000-х годах, но отброшен, потому что стратегия браузеров в 2010-х годах заключалась в соблюдении спецификаций W3C, даже если некоторые функции были удалены: Таблица с прокруткой и фиксированным заголовком / Нижний колонтитул был неуклюже указан до HTML5.

Плохие новости

К сожалению, не существует элегантного способа обработки прокручиваемой таблицы с фиксированным thead/, tfoot потому что спецификации HTML / CSS не очень ясны в отношении этой функции .

Пояснения

Хотя спецификация HTML 4.01 гласит thead/tfoot / tbodyиспользуются (представлены?) Для прокрутки тела таблицы:

Строки таблицы могут быть сгруппированы [...] с использованием элементов THEAD, TFOOT и TBODY [...]. Это разделение позволяет агентам пользователя поддерживать прокрутку тел таблицы независимо от ее головы и ноги.

Но функция рабочей прокручиваемой таблицы в FF 3.6 была удалена в FF 3.7, потому что считается ошибкой, потому что не соответствует спецификациям HTML / CSS. Смотрите это и это комментирует ошибки FF.

Совет разработчиков сети Mozilla

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

<style type="text/css">
table {
  border-spacing: 0;              /* workaround */
}
tbody {
  height: 4em;                    /* define the height */
  overflow-x: hidden;             /* esthetics */
  overflow-y: auto;               /* allow scrolling cells */
}
td {
  border-left:   1px solid blue;  /* workaround */
  border-bottom: 1px solid blue;  /* workaround */
}
</style>

<table>
    <thead><tr><th>Header
    <tfoot><tr><th>Footer
    <tbody>
        <tr><td>Cell 1    <tr><td>Cell 2
        <tr><td>Cell 3    <tr><td>Cell 4
        <tr><td>Cell 5    <tr><td>Cell 6
        <tr><td>Cell 7    <tr><td>Cell 8
        <tr><td>Cell 9    <tr><td>Cell 10
        <tr><td>Cell 11   <tr><td>Cell 12
        <tr><td>Cell 13   <tr><td>Cell 14
    </tbody>
</table>

Однако MDN также говорит, что это больше не работает на FF :-(
Я также проверил на IE8 => таблица также не прокручивается: - ((

— olibre
источник
Советы по MDN для прокручиваемой ссылки на таблицу не являются релевантной информацией, которая говорит о коллапсе границы Возможно, страница изменилась, потому что прошло 5 лет
— partizanos
Спасибо @partizanos Я наконец нашел оригинальную вики-страницу в истории MDN! Мой старый ответ кажется теперь устаревшим, но для процветания следующее поколение разработчиков будет знать, что это было возможно и легко реализовать еще в 2000-х ;-) Приветствия
— olibre
3

Не уверен, что кто-то все еще смотрит на это, но тот способ, которым я делал это ранее, состоит в том, чтобы использовать две таблицы для отображения одной исходной таблицы - первую - просто строку заголовка исходной таблицы и никаких строк тела таблицы (или пустую строку тела для это подтверждают).

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

Вторая таблица в ее div расположена чуть ниже первой таблицы в HTML и выглядит как отдельная таблица с фиксированным заголовком и прокручиваемой нижней частью. Я проверял это только в Safari, Firefox и IE (последние версии каждой из них весной 2010 года), но он работал во всех из них.

Единственной проблемой было то, что первая таблица не будет проверяться без тела (валидатор W3.org - строгий XHTML 1.0), а когда я добавляю таблицу без содержимого, она вызывает пустую строку. Вы можете использовать CSS, чтобы сделать это невидимым, но оно все равно будет занимать место на странице.

— Мик
источник
Как дополнительный ряд все еще будет занимать место? Он не должен занимать место на экране, если вы используете display: none;, если вы не имеете в виду пространство в источнике ..?
— ClarkeyBoy
3

Это решение работает в Chrome 35, Firefox 30 и IE 11 (другие версии не тестировались)

Его чистый CSS: http://jsfiddle.net/ffabreti/d4sope1u/

Все настроено на отображение: блок, столу нужна высота:

    table {
        overflow: scroll;
        display: block;    /*inline-block*/
        height: 120px;
    }
    thead > tr  {
        position: absolute;
        display: block;
        padding: 0;
        margin: 0;
        top: 0;
        background-color: gray;
    }
    tbody > tr:nth-of-type(1) {
        margin-top: 16px;
    }
    tbody tr {
        display: block;
    }

    td, th {
        width: 70px;
        border-style:solid;
        border-width:1px;
        border-color:black;
    }
— Фернандо Фабрети
источник
2

Это вызвало у меня огромную головную боль, пытаясь реализовать такую ​​сетку для нашего приложения. Я испробовал все различные техники, но у каждого из них были проблемы. Самое близкое, что я нашел, - это использование плагина jQuery, такого как Flexigrid (см. Http://www.ajaxrain.com). альтернативы можно ), но, похоже, он не поддерживает таблицы шириной 100%, что мне и было нужно.

То, что я в итоге делал, катало меня; Firefox поддерживает tbodyэлементы прокрутки, поэтому я просматривал браузер и использовал соответствующий CSS (настройку высоты, переполнение и т. Д., Спрашиваю, хотите ли вы больше подробностей), чтобы сделать эту прокрутку, а затем для других браузеров я использовал две отдельные таблицы, настроенные на использованиеtable-layout: fixed которые используют размер алгоритм, который гарантированно не переполняет указанный размер (обычные таблицы будут расширяться, когда содержимое слишком широкое, чтобы уместиться). Придав обеим таблицам одинаковую ширину, я смог выстроить их столбцы. Я обернул второй в наборе элементов для прокрутки, и немного поиграв в покер с полями и т. Д. Мне удалось получить тот внешний вид, который я хотел.

Извините, если этот ответ звучит немного расплывчато; Я пишу быстро, потому что у меня мало времени. Оставьте комментарий, если вы хотите, чтобы я расширил его дальше!

— Люк Беннетт
источник
Извините, что воскресил эту старую ветку, но мне действительно нужно знать, как вы с этим справились. У меня работает FF, но не браузеры IE / WebKit. Пожалуйста, помогите, когда сможете.
— Альферо Чингоно
2

Вот код, который действительно работает для IE и FF (по крайней мере):

<html>
<head>
    <title>Test</title>
    <style type="text/css">
        table{
            width: 400px;
        }
        tbody {
            height: 100px;
            overflow: scroll;
        }
        div {
            height: 100px;
            width: 400px;
            position: relative;
        }
        tr.alt td {
            background-color: #EEEEEE;
        }
    </style>
    <!--[if IE]>
        <style type="text/css">
            div {
                overflow-y: scroll;
                overflow-x: hidden;
            }
            thead tr {
                position: absolute;
                top: expression(this.offsetParent.scrollTop);
            }
            tbody {
                height: auto;
            }
        </style>
    <![endif]--> 
</head>
<body>
    <div >
        <table border="0" cellspacing="0" cellpadding="0">
            <thead>
                <tr>
                    <th style="background: lightgreen;">user</th>
                    <th style="background: lightgreen;">email</th>
                    <th style="background: lightgreen;">id</th>
                    <th style="background: lightgreen;">Y/N</th>
                </tr>
            </thead>
            <tbody align="center">
                <!--[if IE]>
                    <tr>
                        <td colspan="4">on IE it's overridden by the header</td>
                    </tr>
                <![endif]--> 
                <tr>
                    <td>user 1</td>
                    <td>user@user.com</td>
                    <td>1</td>
                    <td>Y</td>
                </tr>
                <tr class="alt">
                    <td>user 2</td>
                    <td>user@user.com</td>
                    <td>2</td>
                    <td>N</td>
                </tr>
                <tr>
                    <td>user 3</td>
                    <td>user@user.com</td>
                    <td>3</td>
                    <td>Y</td>
                </tr>
                <tr class="alt">
                    <td>user 4</td>
                    <td>user@user.com</td>
                    <td>4</td>
                    <td>N</td>
                </tr>
                <tr>
                    <td>user 5</td>
                    <td>user@user.com</td>
                    <td>5</td>
                    <td>Y</td>
                </tr>
                <tr class="alt">
                    <td>user 6</td>
                    <td>user@user.com</td>
                    <td>6</td>
                    <td>N</td>
                </tr>
                <tr>
                    <td>user 7</td>
                    <td>user@user.com</td>
                    <td>7</td>
                    <td>Y</td>
                </tr>
                <tr class="alt">
                    <td>user 8</td>
                    <td>user@user.com</td>
                    <td>8</td>
                    <td>N</td>
                </tr>
            </tbody>
        </table>
    </div>
</body></html>

Я изменил исходный код, чтобы сделать его более понятным, а также чтобы он работал нормально в IE и FF.

Оригинальный код ЗДЕСЬ

— Даниэль Коста
источник
1
В IE7 / 8 это работает только в режиме Quirks, и перестает работать, как только вы добавляете тип документа, т.е.<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
— ccpizza
1

Вот моя альтернатива. Он также использует различные DIV для заголовка, тела и нижнего колонтитула, но синхронизируется для изменения размера окна и с поиском, прокруткой, сортировкой, фильтрацией и позиционированием:

Мои списки CD

Нажмите на кнопки Jazz, Classical ..., чтобы увидеть таблицы. Он настроен так, что он адекватен, даже если JavaScript отключен.

Кажется, хорошо на IE, FF и WebKit (Chrome, Safari).

— goneill
источник
1

Извините, я не прочитал все ответы на ваш вопрос.

Да, здесь то, что вы хотите (я уже сделал)

Вы можете использовать две таблицы с одинаковыми именами классов для одинакового стиля: одна только с заголовком таблицы, а другая с вашими строками. Теперь поместите эту таблицу в div с фиксированной высотой с помощью overflow-y: auto OR scroll.

— Sanuj
источник
1

Основная проблема, с которой я столкнулся в связи с приведенными выше предложениями, заключалась в том, чтобы подключить tablesorter.js и иметь возможность перемещать заголовки для таблицы, ограниченной определенным максимальным размером. Я в конце концов наткнулся на плагин jQuery.floatThead, который предоставил плавающие заголовки и позволил сортировке продолжать работать.

У этого также есть хорошая страница сравнения, показывающая себя против подобных плагинов .

— Гай Холлингтон
источник
1

Live JsFiddle

Это возможно только с HTML и CSS

table.scrollTable {
  border: 1px solid #963;
  width: 718px;
}

thead.fixedHeader {
  display: block;
}

thead.fixedHeader tr {
  height: 30px;
  background: #c96;
}

thead.fixedHeader tr th {
  border-right: 1px solid black;
}

tbody.scrollContent {
  display: block;
  height: 262px;
  overflow: auto;
}

tbody.scrollContent td {
  background: #eee;
  border-right: 1px solid black;
  height: 25px;
}

tbody.scrollContent tr.alternateRow td {
  background: #fff;
}

thead.fixedHeader th {
  width: 233px;
}

thead.fixedHeader th:last-child {
  width: 251px;
}

tbody.scrollContent td {
  width: 233px;
}
<table cellspacing="0" cellpadding="0" class="scrollTable">
  <thead class="fixedHeader">
    <tr class="alternateRow">
      <th>Header 1</th>
      <th>Header 2</th>
      <th>Header 3</th>
    </tr>
  </thead>
  <tbody class="scrollContent">
    <tr class="normalRow">
      <td>Cell Content 1</td>
      <td>Cell Content 2</td>
      <td>Cell Content 3</td>
    </tr>
    <tr class="alternateRow">
      <td>More Cell Content 1</td>
      <td>More Cell Content 2</td>
      <td>More Cell Content 3</td>
    </tr>
    <tr class="normalRow">
      <td>Even More Cell Content 1</td>
      <td>Even More Cell Content 2</td>
      <td>Even More Cell Content 3</td>
    </tr>
    <tr class="alternateRow">
      <td>And Repeat 1</td>
      <td>And Repeat 2</td>
      <td>And Repeat 3</td>
    </tr>
    <tr class="normalRow">
      <td>Cell Content 1</td>
      <td>Cell Content 2</td>
      <td>Cell Content 3</td>
    </tr>
    <tr class="alternateRow">
      <td>More Cell Content 1</td>
      <td>More Cell Content 2</td>
      <td>More Cell Content 3</td>
    </tr>
    <tr class="normalRow">
      <td>Even More Cell Content 1</td>
      <td>Even More Cell Content 2</td>
      <td>Even More Cell Content 3</td>
    </tr>
    <tr class="alternateRow">
      <td>And Repeat 1</td>
      <td>And Repeat 2</td>
      <td>And Repeat 3</td>
    </tr>
    <tr class="normalRow">
      <td>Cell Content 1</td>
      <td>Cell Content 2</td>
      <td>Cell Content 3</td>
    </tr>
    <tr class="alternateRow">
      <td>More Cell Content 1</td>
      <td>More Cell Content 2</td>
      <td>More Cell Content 3</td>
    </tr>
    <tr class="normalRow">
      <td>Even More Cell Content 1</td>
      <td>Even More Cell Content 2</td>
      <td>Even More Cell Content 3</td>
    </tr>
    <tr class="alternateRow">
      <td>And Repeat 1</td>
      <td>And Repeat 2</td>
      <td>And Repeat 3</td>
    </tr>
    <tr class="normalRow">
      <td>Cell Content 1</td>
      <td>Cell Content 2</td>
      <td>Cell Content 3</td>
    </tr>
    <tr class="alternateRow">
      <td>More Cell Content 1</td>
      <td>More Cell Content 2</td>
      <td>More Cell Content 3</td>
    </tr>
    <tr class="normalRow">
      <td>Even More Cell Content 1</td>
      <td>Even More Cell Content 2</td>
      <td>Even More Cell Content 3</td>
    </tr>
    <tr class="alternateRow">
      <td>And Repeat 1</td>
      <td>And Repeat 2</td>
      <td>And Repeat 3</td>
    </tr>
    <tr class="normalRow">
      <td>Cell Content 1</td>
      <td>Cell Content 2</td>
      <td>Cell Content 3</td>
    </tr>
    <tr class="alternateRow">
      <td>More Cell Content 1</td>
      <td>More Cell Content 2</td>
      <td>More Cell Content 3</td>
    </tr>
    <tr class="normalRow">
      <td>Even More Cell Content 1</td>
      <td>Even More Cell Content 2</td>
      <td>Even More Cell Content 3</td>
    </tr>
    <tr class="alternateRow">
      <td>And Repeat 1</td>
      <td>And Repeat 2</td>
      <td>And Repeat 3</td>
    </tr>
    <tr class="normalRow">
      <td>Cell Content 1</td>
      <td>Cell Content 2</td>
      <td>Cell Content 3</td>
    </tr>
    <tr class="alternateRow">
      <td>More Cell Content 1</td>
      <td>More Cell Content 2</td>
      <td>More Cell Content 3</td>
    </tr>
    <tr class="normalRow">
      <td>Even More Cell Content 1</td>
      <td>Even More Cell Content 2</td>
      <td>Even More Cell Content 3</td>
    </tr>
    <tr class="alternateRow">
      <td>And Repeat 1</td>
      <td>And Repeat 2</td>
      <td>And Repeat 3</td>
    </tr>
    <tr class="normalRow">
      <td>Cell Content 1</td>
      <td>Cell Content 2</td>
      <td>Cell Content 3</td>
    </tr>
    <tr class="alternateRow">
      <td>More Cell Content 1</td>
      <td>More Cell Content 2</td>
      <td>More Cell Content 3</td>
    </tr>
    <tr class="normalRow">
      <td>Even More Cell Content 1</td>
      <td>Even More Cell Content 2</td>
      <td>Even More Cell Content 3</td>
    </tr>
    <tr class="alternateRow">
      <td>And Repeat 1</td>
      <td>And Repeat 2</td>
      <td>And Repeat 3</td>
    </tr>
    <tr class="normalRow">
      <td>Cell Content 1</td>
      <td>Cell Content 2</td>
      <td>Cell Content 3</td>
    </tr>
    <tr class="alternateRow">
      <td>More Cell Content 1</td>
      <td>More Cell Content 2</td>
      <td>More Cell Content 3</td>
    </tr>
    <tr class="normalRow">
      <td>Even More Cell Content 1</td>
      <td>Even More Cell Content 2</td>
      <td>Even More Cell Content 3</td>
    </tr>
    <tr class="alternateRow">
      <td>And Repeat 1</td>
      <td>And Repeat 2</td>
      <td>And Repeat 3</td>
    </tr>
    <tr class="normalRow">
      <td>Cell Content 1</td>
      <td>Cell Content 2</td>
      <td>Cell Content 3</td>
    </tr>
    <tr class="alternateRow">
      <td>More Cell Content 1</td>
      <td>More Cell Content 2</td>
      <td>More Cell Content 3</td>
    </tr>
    <tr class="normalRow">
      <td>Even More Cell Content 1</td>
      <td>Even More Cell Content 2</td>
      <td>Even More Cell Content 3</td>
    </tr>
    <tr class="alternateRow">
      <td>And Repeat 1</td>
      <td>And Repeat 2</td>
      <td>And Repeat 3</td>
    </tr>
    <tr class="normalRow">
      <td>Cell Content 1</td>
      <td>Cell Content 2</td>
      <td>Cell Content 3</td>
    </tr>
    <tr class="alternateRow">
      <td>More Cell Content 1</td>
      <td>More Cell Content 2</td>
      <td>More Cell Content 3</td>
    </tr>
    <tr class="normalRow">
      <td>Even More Cell Content 1</td>
      <td>Even More Cell Content 2</td>
      <td>Even More Cell Content 3</td>
    </tr>
    <tr class="alternateRow">
      <td>And Repeat 1</td>
      <td>And Repeat 2</td>
      <td>And Repeat 3</td>
    </tr>
    <tr class="normalRow">
      <td>Cell Content 1</td>
      <td>Cell Content 2</td>
      <td>Cell Content 3</td>
    </tr>
    <tr class="alternateRow">
      <td>More Cell Content 1</td>
      <td>More Cell Content 2</td>
      <td>More Cell Content 3</td>
    </tr>
    <tr class="normalRow">
      <td>Even More Cell Content 1</td>
      <td>Even More Cell Content 2</td>
      <td>Even More Cell Content 3</td>
    </tr>
    <tr class="alternateRow">
      <td>End of Cell Content 1</td>
      <td>End of Cell Content 2</td>
      <td>End of Cell Content 3</td>
    </tr>
  </tbody>
</table>
Развернуть фрагмент

— Md. Rafee
источник
0

Если это нормально - использовать JavaScript, вот мое решение. Создайте таблицу фиксированной ширины для всех столбцов (пикселей!), Добавьте в таблицу класс Scrollify и добавьте этот javascript + jquery 1.4.x set height в css или style!

Протестировано в: Opera, Chrome, Safari, FF, IE5.5 ( сбой Epic script ), IE6, IE7, IE8, IE9

//Usage add Scrollify class to a table where all columns (header and body) have a fixed pixel width
$(document).ready(function () {
    $("table.Scrollify").each(function (index, element) {
        var header = $(element).children().children().first();
        var headerHtml = header.html();
        var width = $(element).outerWidth();
        var height = parseInt($(element).css("height")) - header.outerHeight();
        $(element).height("auto");
        header.remove();
        var html = "<table style=\"border-collapse: collapse;\" border=\"1\" rules=\"all\" cellspacing=\"0\"><tr>" + headerHtml +
                         "</tr></table><div style=\"overflow: auto;border:0;margin:0;padding:0;height:" + height + "px;width:" + (parseInt(width) + scrollbarWidth()) + "px;\">" +
                         $(element).parent().html() + "</div>";

        $(element).parent().html(html);
    });
});


//Function source: http://www.fleegix.org/articles/2006-05-30-getting-the-scrollbar-width-in-pixels
//License: Apache License, version 2
function scrollbarWidth() {
    var scr = null;
    var inn = null;
    var wNoScroll = 0;
    var wScroll = 0;

    // Outer scrolling div
    scr = document.createElement('div');
    scr.style.position = 'absolute';
    scr.style.top = '-1000px';
    scr.style.left = '-1000px';
    scr.style.width = '100px';
    scr.style.height = '50px';
    // Start with no scrollbar
    scr.style.overflow = 'hidden';

    // Inner content div
    inn = document.createElement('div');
    inn.style.width = '100%';
    inn.style.height = '200px';

    // Put the inner div in the scrolling div
    scr.appendChild(inn);
    // Append the scrolling div to the doc
    document.body.appendChild(scr);

    // Width of the inner div sans scrollbar
    wNoScroll = inn.offsetWidth;
    // Add the scrollbar
    scr.style.overflow = 'auto';
    // Width of the inner div width scrollbar
    wScroll = inn.offsetWidth;

    // Remove the scrolling div from the doc
    document.body.removeChild(
        document.body.lastChild);

    // Pixel width of the scroller
    return (wNoScroll - wScroll);
}

Редактировать: Фиксированная высота.

— Питер
источник
0

Я делаю это с помощью JavaScript (без библиотеки) и CSS - тело таблицы прокручивается со страницей, и таблица не должна быть фиксированной ширины или высоты, хотя каждый столбец должен иметь ширину. Вы также можете продолжить сортировку.

В принципе:

  1. В HTML создайте элементы div контейнера, чтобы расположить строку заголовка таблицы и тело таблицы, а также создайте div «mask», чтобы скрыть тело таблицы при ее прокрутке за заголовком.

  2. В CSS преобразуйте части таблицы в блоки

  3. В Javascript, получить ширину таблицы и соответствовать ширине маски ... получить высоту содержимого страницы ... измерить положение прокрутки ... манипулировать CSS, чтобы установить положение строки заголовка таблицы и высоту маски

Вот javascript и демонстрационная версия jsFiddle.

// get table width and match the mask width

function setMaskWidth() { 
  if (document.getElementById('mask') !==null) {
    var tableWidth = document.getElementById('theTable').offsetWidth;

    // match elements to the table width
    document.getElementById('mask').style.width = tableWidth + "px";
   }
}

function fixTop() {

  // get height of page content 
  function getScrollY() {
      var y = 0;
      if( typeof ( window.pageYOffset ) == 'number' ) {
        y = window.pageYOffset;
      } else if ( document.body && ( document.body.scrollTop) ) {
        y = document.body.scrollTop;
      } else if ( document.documentElement && ( document.documentElement.scrollTop) ) {
        y = document.documentElement.scrollTop;
      }
      return [y];
  }  

  var y = getScrollY();
  var y = y[0];

  if (document.getElementById('mask') !==null) {
      document.getElementById('mask').style.height = y + "px" ;

      if (document.all && document.querySelector && !document.addEventListener) {
        document.styleSheets[1].rules[0].style.top = y + "px" ;
      } else {
        document.styleSheets[1].cssRules[0].style.top = y + "px" ;
      }
  }

}

window.onscroll = function() {
  setMaskWidth();
  fixTop();
}
— Дебора
источник
Но в вашей демонстрации заголовок таблицы не остается на месте, он просто прокручивается. (Хром здесь.)
— Sz.
Я не вижу этого в Chrome. Вы уверены, что не ошиблись с желтыми выделенными ячейками и инструкциями красного цвета для заголовка? Ячейки заголовка расположены сверху и окрашены в серый цвет на сером («Col 1», «Col 2» и т. Д.).
— Дебора
0

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

.table-fill {
    background: white;
    border-radius:3px;
    border-collapse: collapse;
    margin: auto;
    width: 100%;
    max-width: 800px;
    padding:5px;
    box-shadow: 0 5px 10px rgba(0, 0, 0, 0.1);
    animation: float 5s infinite;
}

Как только я убрал ширину: 100%; все функции прокрутки начали работать.

— Мэтью Парк
источник
0

Если у вас достаточно низкие стандарты;) вы можете разместить таблицу, которая содержит только заголовок, прямо над таблицей, которая имеет только тело. Он не будет прокручиваться горизонтально, но если вам это не нужно ...

— M610
источник
Используя наш сайт, вы подтверждаете, что прочитали и поняли нашу Политику в отношении файлов cookie и Политику конфиденциальности.
Licensed under cc by-sa 3.0 with attribution required.