it-swarm.com.ru

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

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

143
minty

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

53
Ken Penn

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

34
Vitalii Fedorenko

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

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

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

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

12
Jeromy French

Вы пытались использовать 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>
8
Chris Marasti-Georg

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

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

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

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

Тем не менее, поскольку 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
}    

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

7
Javarome

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

4
olibre

Это решение работает в 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;
    }
3
Fernando Fabreti

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

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

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

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

3
Mick

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

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

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

2
Luke Bennett

Вот код, который действительно работает для 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>[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 .. 

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

2
Daniel Costa

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

Мои списки CD

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

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

1
goneill

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>

1
Md. Rafee

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

Он также имеет страницу сравнения Nice, показывающую себя против подобные плагины

1
Guy Hollington

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

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

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

1
Sanuj

Если нормально использовать 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
Peter

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

В принципе:

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

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

  3. В Javascript получите ширину таблицы и сопоставьте ширину маски ... получите Высоту содержимого страницы ... измерьте положение прокрутки ... Манипулируйте 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();
}
0
Deborah

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

0
M610

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