6.2. Прокручиваемая таблица

Еще более сложные по структуре таблицы можно получить, вставляя в ячейки другие таблицы. В качестве примера рассмотрим создание прокручиваемой табли­цы, содержащей много рядов. Разумеется, такую таблицу можно заключить в кон­тейнер <div> с необходимой высотой и стилевым параметром overflow:auto, за­дающим полосы прокрутки в случае необходимости. Однако в этом случае прокручиваться будет вся таблица, включая заголовки столбцов. Тем не менее, же­лательно, чтобы положение заголовков оставалось фиксированным, а прокручива­лись только ряды с данными. Данную задачу можно решить следующим способом.

С оздадим таблицу с заголовками столбцов и с единственным рядом данных, со­держащим единственную ячейку, расширенную на количество столбцов. В эту ячейку вставим прокручиваемый контейнер <div>, а в него - таблицу, со­держащую только ряды с данными. Далее останется только согласовать размеры внешней и внутренней таблиц.

В листинге 8 приведен код прокручиваемой таблицы, а на рис. - ее вил в окне браузера. В данном примере таблица содержит пять столбцов одинаковой ширины 80 рх, а параметр width таблицы устанавливается равным

Л истинг 8

80 х 5 = 400 рх. Ширина контейнера <div> с другой таблицей несколько больше (420 рх), чтобы полоса вертикальной прокрутки оказалась прижатой к правому краю внешней таблицы. При этом в Internet Explorer, Firefox и Opera полоса прокрутки будет расположена внутри таблицы, а в Safari и Chrome - снаружи. В данном примере важную роль играет параметр text-layout:fixed. Параметры прокручиваемого элемента <div>, содержащего таблицу с данными, указаны в классе .scrolling. в котором за возможность вертикального прокручивания таблицы отвечает пара­метр overflow-y:auto.

,

7. Декорирование таблицы

По умолчанию фон таблицы прозрачен, но его можно задать стилевым параметром background и другими параметрами этой же группы (background-color, background-image и т. п.). Фон можно установить для таблицы в целом (<table>), для отдельных ее ячеек (<td> и <th>) и рядов (<tr>).

Цвет и стиль рамок (границ) таблицы в целом и ее ячеек задает параметр border и другие параметры этой же группы (border-color, border-style и т. п.). При этом можно оформить отдельно каждую из четырех сторон прямоугольной рамки. На­пример, для задания нижней части рамки в виде штриховой красной линии толщи­ной 2 рх можно использовать параметр border-bottom: dashed 2px red

или же группу таких параметров:

border-bottom-style:dashed;

border-bottom-color:red;

border-bottom-width:2px;

На рис. показан пример таблицы с выделением ряда и ячейки, на которых находится указатель мыши. Выделение элементов обеспечивается стилевыми па­раметрами для селекторов tr:hover и td:hover. Браузеры Internet Explorer, Firefox и Opera показывают данный эффект с сохранением внешней рамки таблицы, a Safa­ri и Chrome не отображают внешнюю рамку на участке, соответствующем выде­ленному ряду.

Н ередко ряды или столбцы таблиц через один выделяют цветом. В CSS можно создать класс с параметрами выделения, а затем в каждом элементе <tr>, требую­щем выделения, посредством атрибута class указать на него ссылку. Для выделе­ния столбцов можно применить теги <col/> со ссылкой на класс параметров выде­ления (рис.).