Как я могу позволить телу стола прокручиваться, но при этом голова должна оставаться на месте?
Я пишу страницу, на которой мне нужна таблица HTML для поддержания заданного размера. Мне нужно, чтобы заголовки в верхней части таблицы всегда оставались там, но мне также нужно, чтобы тело таблицы прокручивалось независимо от того, сколько строк добавлено в таблицу. Подумайте о мини-версии Excel. Это кажется простой задачей, но почти каждое решение, которое я нашел в Интернете, имеет некоторые недостатки. Как я могу это решить?
Меня интересует ответ для всех браузеров!
Это не ответ, потому что я не могу его проверить, но как насчет того, чтобы CSS установил tbody для прокрутки с определенной высотой?
есть много примеров. это один из них.
Там много хаков CSS. Работа в IE7 должна быть тривиальной.
Работает только в 5 и 5.5, насколько я могу судить.
Это не работает и в IE8. Я попробовал собственный режим и режим совместимости, но ничего не работает, кроме режима причуд.
ваше решение не работает, если вы не укажете ширину <th> внутри <thead>
«Работа в IE7 должна быть тривиальной». Джим, это ты? Вы мой руководитель проекта? :)
![Безумие обратных вызовов в javascript [JS]](https://i.imgur.com/WsjO6zJb.png)
Ответы 18
Вы пробовали использовать 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>
Мне нужно настроить таргетинг на IE6, IE7, FF, ... но, к сожалению, особенно на IE
Измените таблицу так, чтобы она была меньше 100% по ширине, скажем 99%, и проблема должна быть решена.
overflow-x: hidden; и overflow-y: auto также помогают.
ты уверен, что эта работа? Только что проверил, не работает ни в фф, ни в хроме.
Раньше это работало в firefox, и это очевидный и небезупречный код. Однако в более поздних версиях firefox он не работает.
Это не работает, потому что «переполнение» применимо только к «блочным контейнерам» (w3.org/TR/CSS21/visufx.html#overflow), а блоки таблиц не являются «блочными контейнерами» (w3.org/TR/CSS21/visuren.html#block-boxes).
Это вызвало у меня огромную головную боль при попытке реализовать такую сетку для нашего приложения. Я перепробовал все различные техники, но у каждой из них были проблемы. Самое близкое, что я пришел, было использование плагина jQuery, такого как Flexigrid (альтернативы см. На http://www.ajaxrain.com), но он, похоже, не поддерживает таблицы шириной 100%, что мне было нужно.
В итоге я закрутил свое собственное; Firefox поддерживает прокрутку элементов tbody, поэтому я просмотрел и использовал соответствующий CSS (установка высоты, переполнение и т. д... спросите, хотите ли вы более подробной информации), чтобы сделать эту прокрутку, а затем для других браузеров я использовал две отдельные таблицы, установленные для использования table-layout: fixed, который использует алгоритм определения размера, который гарантированно не выходит за пределы указанного размера (обычные таблицы будут расширяться, когда содержимое слишком велико для размещения). Задав обеим таблицам одинаковую ширину, я смог выровнять их столбцы. Я завернул второй в набор div для прокрутки, и с помощью небольшого количества jiggery pokery с полями и т. д. Мне удалось получить тот внешний вид, который я хотел.
Извините, если этот ответ местами звучит немного расплывчато; Пишу быстро, у меня мало времени. Оставьте комментарий, если хотите, чтобы я расширился!
Извините, что воскресил эту старую ветку, но мне действительно нужно знать, как вы с этим справились. У меня работает FF, но не браузеры IE / WebKit. Пожалуйста, помогите, когда сможете.
Мне нужно было найти такой же ответ. Лучший пример, который я нашел, - это http://www.cssplay.co.uk/menu/tablescroll.html. Я обнаружил, что пример № 2 мне подходит. Вам нужно будет установить высоту внутренней таблицы с помощью Java Script, остальное - CSS.
К сожалению, этот метод не работает, когда у вас широкая таблица (горизонтальная прокрутка). У вас будет две горизонтальные полосы прокрутки; один для заголовка и один для данных.
ваше решение не работает, если вы не укажете ширину <th> внутри <thead>
Чтобы соответствовать (относительно) новым стандартам переполнения стека, не могли бы вы отредактировать этот ответ, включив в него соответствующие биты из ссылки?
Где источник, Билли?
Невозможно синхронизировать ширину столбцов между заголовком и (прокручиваемым) телом таблицы без использования JavaScript или предварительно определенных значений.
Не уверен, что кто-то все еще смотрит на это, но они, как я делал это ранее, - это использовать две таблицы для отображения единственной исходной таблицы - первая - только исходная строка заголовка таблицы и никаких строк тела таблицы (или пустая строка тела, чтобы сделать это подтверждают).
Второй находится в отдельном блоке div и не имеет заголовка, а имеет только исходные строки тела таблицы. Затем отдельный div становится прокручиваемым.
Вторая таблица в этом div размещается чуть ниже первой таблицы в HTML и выглядит как одна таблица с фиксированным заголовком и прокручиваемой нижней частью. Я тестировал это только в Safari, Firefox и IE (последние версии каждого из них весной 2010 года), но он работал во всех из них.
Единственная проблема заключалась в том, что первая таблица не могла быть проверена без тела (валидатор W3.org - XHTML 1.0 strict), а когда я добавил таблицу без содержимого, это вызывает пустую строку. Вы можете использовать CSS, чтобы сделать это невидимым, но он по-прежнему занимает место на странице.
Как дополнительный ряд еще займет место? Он не должен занимать место на экране, если вы используете display: none;, если вы не имеете в виду место в исходном коде ..?
Вот код, который действительно работает для 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 ..
Исходный код ЗДЕСЬ
В IE7 / 8 это работает только в режиме Quirks, и он перестает работать, как только вы добавляете doctype, то есть <!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd"> .
Вот моя альтернатива. Он также использует разные DIV для заголовка, тела и нижнего колонтитула, но синхронизируется для изменения размера окна и с поиском, прокруткой, сортировкой, фильтрацией и позиционированием:
Нажмите кнопки «Джаз», «Классика ...», чтобы просмотреть таблицы. Он настроен так, что его достаточно, даже если JavaScript отключен.
Вроде нормально для IE, FF и WebKit (Chrome, Safari).
Если можно использовать 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);
}
Обновлено: фиксированная высота.
Я обнаружил, что Таблицы данных довольно гибок. Хотя его версия по умолчанию основана на jquery, существует также Плагин AngularJs.
очень гладко - большая часть функциональности работает на моем S3, android 4.0.4, но не поиск / фильтр
Редактировать: Это очень старый ответ, и он здесь для процветания, просто чтобы показать, что он поддерживался еще в 2000-х, но упал, потому что стратегия браузеров в 2010 году заключалась в соблюдении спецификаций W3C, даже если некоторые функции были удалены: Прокручиваемая таблица с фиксированным заголовком / footer был неуклюже указан до HTML5.
Плохие новости
К сожалению, нет элегантного способа обработки прокручиваемой таблицы с фиксированным thead / tfoot.
потому что Спецификации HTML / CSS не очень ясны в отношении этой функции..
Пояснения
Хотя HTML 4.01 Спецификация говорит, что thead / tfoot / tbody используются (представлены?) Для прокрутки тела таблицы:
Table rows may be grouped [...] using the THEAD, TFOOT and TBODY elements [...]. This division enables user agents to support scrolling of table bodies independently of the table head and foot.
Но функция рабочей прокручиваемой таблицы в 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. Наконец-то я нашел исходную вики-страницу в истории MDN! Мой старый ответ кажется сейчас устаревшим, но для процветания следующее поколение разработчиков будет знать, что это было возможно и легко реализовать еще в 2000-х годах ;-) Ура
Извините, я не прочитал все ответы на ваш вопрос.
Да вот то, что ты хочешь (я уже сделал)
Вы можете использовать две таблицы с одинаковым именем класса для аналогичного стиля, одну только с заголовком таблицы, а другую с вашими строками. Теперь поместите эту таблицу в div с фиксированной высотой с помощью overflow-y: auto OR scroll.
Я увидел отличное решение аналогичного вопроса Шона Хэдди и позволил себе внесение некоторых правок:
- Используйте классы вместо идентификатора, чтобы один скрипт jQuery можно было повторно использовать для несколько таблиц на одной странице
- Добавлена поддержка элементов семантической таблицы HTML, таких как caption, thead, tfoot и tbody.
- Полоса прокрутки сделана необязательной, поэтому она не будет отображаться для таблиц, которые «короче» прокручиваемой высоты.
- Скорректирована ширина прокручиваемого div, чтобы поднять полосу прокрутки до правого края таблицы.
- Сделал концепцию доступной
- использование aria-hidden = "true" во введенном заголовке статической таблицы
- и оставив исходную thead на месте, просто спрятав с помощью jQuery и установив
aria-hidden = "false"
- Показаны примеры нескольких таблиц разного размера.
Однако тяжелую работу сделал Шон. Спасибо также Мэтту Берланду за указание на необходимость поддержки tfoot.
Пожалуйста, посмотрите сами на http://jsfiddle.net/jhfrench/eNP2N/
Хорошо, но это плохо, если вы хотите, чтобы заголовок и был нижним колонтитулом!
Спасибо, Мэтт, я внес поправку.
Если вы показываете границы td и th, необходимо настроить выравнивание.
Основная проблема, с которой я столкнулся с приведенными выше предложениями, заключалась в том, что я мог подключить tablesorter.js И иметь возможность размещать заголовки для таблицы, ограниченной определенным максимальным размером. В конце концов я наткнулся на плагин jQuery.floatThead, который предоставлял плавающие заголовки и позволял сортировке продолжать работу.
У него также есть хорошая страница сравнения, показывающая себя по сравнению с похожие плагины.
Я делаю это с помощью javascript (без библиотеки) и CSS - тело таблицы прокручивает страницу, и таблица не обязательно должны иметь фиксированную ширину или высоту, хотя каждый столбец должен иметь ширину. Вы также можете сохранить функцию сортировки.
В основном:
В HTML создайте контейнерные блоки div, чтобы разместить строку заголовка таблицы и тело таблицы, также создайте "маску" div, чтобы скрыть тело таблицы, поскольку оно прокручивает заголовок
В CSS преобразуйте части таблицы в блоки
В 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();
}
Но в вашей демонстрации заголовок таблицы не остается на месте, он просто прокручивается. (Chrome здесь.)
Я не вижу этого в Chrome. Вы уверены, что не путаете выделенные желтым цветом ячейки с инструкциями, выделенными красным для заголовка? Ячейки заголовка находятся вверху серого на сером («Столбец 1», «Столбец 2» и т. д.).
Что вам нужно:
1) иметь корпус стола ограниченной высоты, поскольку прокрутка происходит только тогда, когда содержимое больше, чем окно прокрутки. Однако tbody не может быть задан по размеру, и для этого вы должны отобразить его как block:
tbody {
overflow-y: auto;
display: block;
max-height: 10em; // For example
}
2) Повторная синхронизация ширины столбцов заголовка и тела таблицы, поскольку делает последний block, делает его несвязанным элементом. Единственный способ сделать это - смоделировать синхронизацию с помощью обеспечение одинаковой ширины столбцов для обоих.
Однако, поскольку сам tbody теперь является block, он больше не может вести себя как table. Поскольку для правильного отображения столбцов вам по-прежнему требуется поведение table, решение состоит в том, чтобы попросить каждую из ваших строк отображать как отдельные table:
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
}
См. Демонстрацию здесь, полученную из ответа на этот вопрос.
Спасибо за объяснение. Непонятно, сколькими способами можно сделать что-то подобное, и большинство ответов просто представляют собой некоторый код и ссылку на plunkr, оставляя вам разобраться в этом самостоятельно.
Это решение работает в 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;
}
В прямом эфире 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>Для меня ничего, связанное с прокруткой, действительно не работало, пока я не удалил ширину из таблицы 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%; все функции прокрутки заработали.
Если у вас достаточно низкие стандарты;), вы можете разместить таблицу, содержащую только заголовок, непосредственно над таблицей, имеющей только тело. Он не будет прокручиваться по горизонтали, но если вам это не нужно ...
Мне нужно настроить таргетинг на IE6, IE7, FF, ... но, к сожалению, особенно на IE