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

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

ОТВЕТЫ

Ответ 1

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

Ответ 2

Я нашел DataTables достаточно гибким. Хотя его версия по умолчанию основана на jquery, есть также плагин AngularJs.

Ответ 3

Я видел Sean Haddy отличное решение аналогичного вопроса и взял на себя смелость сделать некоторые правки:

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

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

Ответ 4

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

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

EDIT: он работал хорошо (почти) в firefox - добавление вертикальной полосы прокрутки вызвало потребность в горизонтальной полосе прокрутки - yuck. IE просто устанавливает высоту каждого td для того, что я указал на высоту тела. Здесь лучшее, что я мог бы придумать:

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

Ответ 5

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

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

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

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

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

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
}

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

Ответ 6

Изменить: Это очень старый ответ и здесь для процветания просто для того, чтобы показать, что он был поддержан один раз в 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. См. this и который комментирует ошибки FF.

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

Ниже приведена упрощенная версия полезных советов 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 = > таблица не прокручивается: - ((

Ответ 7

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

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

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

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

Ответ 8

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

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

Все настроено для отображения: block, table требуется высота:

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

Ответ 9

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

То, что я закончил, сворачивало мое; Firefox поддерживает прокрутку элементов tbody, поэтому я просматривал браузер и использовал соответствующий CSS (высота установки, переполнение и т.д.), Спрашивая, хотите ли вы получить более подробную информацию), чтобы сделать эту прокрутку, а затем для других браузеров я использовал две отдельные таблицы, t21 > , который использует алгоритм калибровки, который гарантированно не переполняет указанный размер (обычные таблицы будут расширяться, когда контент будет слишком широким, чтобы соответствовать). Предоставив обе таблицы одинаковой ширины, я смог вывести их столбцы в линию. Я завернул второй в наборе div, чтобы прокручивать его, и с небольшим количеством покера с полями и т.д. Удалось получить внешний вид, который я хотел.

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

Ответ 10

Вот код, который действительно работает для 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 overridden by the header</td>
                    </tr>
                <![endif]--> 
                <tr>
                    <td>user 1</td>
                    <td>[email protected]</td>
                    <td>1</td>
                    <td>Y</td>
                </tr>
                <tr class="alt">
                    <td>user 2</td>
                    <td>[email protected]</td>
                    <td>2</td>
                    <td>N</td>
                </tr>
                <tr>
                    <td>user 3</td>
                    <td>[email protected]</td>
                    <td>3</td>
                    <td>Y</td>
                </tr>
                <tr class="alt">
                    <td>user 4</td>
                    <td>[email protected]</td>
                    <td>4</td>
                    <td>N</td>
                </tr>
                <tr>
                    <td>user 5</td>
                    <td>[email protected]</td>
                    <td>5</td>
                    <td>Y</td>
                </tr>
                <tr class="alt">
                    <td>user 6</td>
                    <td>[email protected]</td>
                    <td>6</td>
                    <td>N</td>
                </tr>
                <tr>
                    <td>user 7</td>
                    <td>[email protected]</td>
                    <td>7</td>
                    <td>Y</td>
                </tr>
                <tr class="alt">
                    <td>user 8</td>
                    <td>[email protected]</td>
                    <td>8</td>
                    <td>N</td>
                </tr>
            </tbody>
        </table>
    </div>
</body></html>

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

Исходный код ЗДЕСЬ

Ответ 11

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

Мои списки компакт-дисков

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

Кажется ОК на IE, FF и WebKit (Chrome, Safari).

Ответ 12

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

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

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

Ответ 13

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

В нем также есть хорошая страница сравнения, показывающая vs похожие плагины.

Ответ 14

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>

Ответ 15

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

Протестировано в: Opera, Chrome, Safari, FF, IE5.5 (Epic script fail), 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);
}

Изменить: Исправлена ​​высота.

Ответ 16

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

В принципе:

  • В HTML создайте контейнеры для размещения строки заголовка таблицы и тело таблицы, также создайте "маску" div, чтобы скрыть тело таблицы, поскольку оно прокручивается над заголовком

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

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

Здесь javascript и jsFiddle DEMO.

// 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();
}

Ответ 17

Для меня ничего не связанное с прокруткой действительно работало, пока я не удалял ширину из таблицы 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%; все функции прокрутки начали работать.

Ответ 18

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