Як я можу дозволити прокручувати тіло столу, але тримати його головою на місці?

148

Я пишу сторінку, де мені потрібна таблиця HTML для підтримки заданого розміру. Мені потрібні заголовки вгорі таблиці, щоб вони постійно перебували там, але мені також потрібне тіло таблиці для прокрутки незалежно від того, скільки рядків додано до таблиці. Придумайте міні-версію excel. Це здається простим завданням, але майже кожне рішення, яке я знайшов в Інтернеті, має деякі недоліки. Як я можу це вирішити?

javascript  html  css  html-table 
— м’ятний
джерело
2
є багато прикладів там. ця одна з них .
— Даррен Копп
Мені потрібно націлитись на IE6, IE7, FF, ... але особливо IE на жаль
— м'ятний
Там багато CSS-хаків. Працювати в IE7 слід неприємно.
— Джим,
4
Мене цікавить відповідь для всіх браузерів!
— м’ятний
15
"Працювати в IE7 слід не банально". Джіме, це ти? Ти мій керівник проекту? :)
— Аароній

Відповіді:

53

Мені довелося знайти ту саму відповідь. Найкращий приклад, який я знайшов - це http://www.cssplay.co.uk/menu/tablescroll.html - я знайшов, що приклад №2 добре працював на мене. Вам потрібно буде встановити висоту внутрішньої таблиці за допомогою Java Script, решта - CSS.

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

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

  • Використовуйте класи замість ідентифікатора, щоб один сценарій jQuery міг повторно використовуватись для кількох таблиць на одній сторінці
  • Додана підтримка таких смислових елементів таблиці HTML, як підписи, теда, tfoot та tbody
  • Робить панель прокрутки необов’язковою, тому вона не відображатиметься для таблиць, "коротших", ніж висота прокрутки
  • Відрегульована ширина Div прокрутки, щоб вивести смугу прокрутки до правого краю таблиці
  • Концепція зробила доступною
    • використовуючи aria-hidden = "true" у введеному заголовку статичної таблиці
    • і залишивши оригінальну теду на місці, просто приховану jQuery та набором aria-hidden="false"
  • Показані приклади декількох таблиць різного розміру

Хоча Шон зробив важкий підйом. Завдяки Метту Берлану теж за те, що він вказав на необхідність підтримувати ноги.

Побачте самі на http://jsfiddle.net/jhfrench/eNP2N/

— Джеромі Французька
джерело
Добре, але він викручується, якщо ви хочете заголовок і колонтитул!
— Метт Берланд
3
Дякую Метт, я здійснив коригування.
— Jeromy French
Вирівнювання потребує налаштування, якщо ви показуєте td і th межі.
— dhochee
8

Ви спробували використовувати thead і tbody та встановити фіксовану висоту на tbody з переливом: прокручування?

Які ваші цільові браузери?

EDIT: Це добре працювало (майже) у firefox - додавання вертикальної смуги прокрутки спричинило потребу і в горизонтальній смузі прокрутки - yuck. 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 , до жаль
— м'ятний
Змініть таблицю так, щоб вона була меншою за 100% в ширину, скажімо, 99%, і вона повинна вирішити проблему
— WolfmanDragon
2
overflow-x: hidden;а overflow-y: autoтакож допомогти.
— justkt
7
Це працювало у firefox, і це очевидний і нечіткий код. Однак в останніх версіях firefox він зламаний.
— Расмус Кай
6
Це не працює, оскільки "переповнення" застосовується лише до "блокових контейнерів" ( w3.org/TR/CSS21/visufx.html#overflow ), а таблиці таблиці не є "блоковими контейнерами" ( w3.org/TR/CSS21/ visuren.html # блок-коробки ).
— mhsmith
8

Що вам потрібно:

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
}

Дивіться демонстрацію тут , отриману від відповіді на це запитання .

— 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 Developer Network

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

— олібре
джерело
Поради MDN для посилання на таблицю, що прокручується, не є релевантною інформацією, вона говорить про згортання кордону. Можливо, сторінка була змінена, тому що минуло 5 років
— partizanos
Дякую @partizanos, я нарешті знайшов оригінальну сторінку вікі в історії MDN! Моя стара відповідь здається застарілою, але задля процвітання наступне покоління розробників буде знати, що це було можливо та легко реалізувати ще у 2000-х ;-) Ура
— олибре
3

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

Другий знаходиться в окремому розділі і не має заголовка та лише оригінальних рядків тіла таблиці. Потім окремий дів робиться прокручуваним.

Друга таблиця в її div розміщена трохи під першою таблицею в HTML, і вона схожа на єдину таблицю з фіксованим заголовком і прокручуваною нижньою секцією. Я протестував це лише у Safari, Firefox та IE (останні версії кожного весни 2010 року), але він працював у всіх них.

Єдиним питанням було те, що перша таблиця не буде перевірена без тіла (W3.org validator - 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 ), але це, здається, не підтримує стовідсоткові таблиці, що саме мені потрібно.

Те, що я в кінцевому підсумку робив, було прокатуванням власного; 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">
— доктрип
1

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

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

Клацніть на кнопки Jazz, Classical ..., щоб побачити таблиці. Він налаштований так, що він є адекватним, навіть якщо JavaScript вимкнено.

Здається нормально для IE, FF та WebKit (Chrome, Safari).

— гугл
джерело
1

Вибачте, я не прочитав усі відповіді на ваше запитання.

Так, ось те, що ти хочеш (я вже зробив)

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

— Санудж
джерело
1

Основна проблема, з якою у мене виникли вищезгадані пропозиції, полягала в тому, що я мав змогу підключити таблиціorter.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>
Розгорніть фрагмент

— Містер Рафі
джерело
0

Якщо нормально використовувати JavaScript, ось моє рішення Створіть набір таблиць фіксованої ширини для всіх стовпців (пікселів!), Додайте клас Scrollify до таблиці та додайте цей javascript + jquery 1.4.x встановити висоту в css або стилі!

Тестовано в: Opera, Chrome, Safari, FF, IE5.5 ( помилка епічного сценарію ), 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 контейнери для розміщення рядка заголовка таблиці та тіла таблиці, а також створіть "маску", щоб приховати тіло таблиці під час прокрутки повз заголовка

  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();
}
— Дебора
джерело
Але у вашій демонстрації заголовок таблиці не залишається поставленим, він просто прокручується. (Хром тут.)
— 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.