Слияние рамок

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

• Если свойство border-style одной из рамок имеет значение hidden, она получает более высокий приоритет, чем остальные рамки. Все рамки в этом месте будут скрытыми.

• Если свойство border-style одной из сливающихся рамок имеет значение none, она получает самый низкий приоритет. В этом месте рамки не будут отрисовываться, только если все границы имеют значение none. Обратите внимание, что none – это применяемое по умолчанию значение свойства border-style.

• Если хотя бы одна из сливающихся рамок имеет значение, отличное от none, и ни одна из сливающихся рамок не имеет значения hidden, более узкие рамки проигрывают более широким. Если несколько сливающихся рамок имеют одинаковую ширину, то стили рамки применяются в порядке от более предпочтительного к менее: double, solid, dashed, dotted, ridge, outset, groove, inset. Таким образом, если сливаются две рамки одинаковой ширины, из которых одна – dashed, а другая – outset, то рамка в этом месте будет пунктирной (dashed).

• Если сливающиеся рамки имеют одинаковые стиль и ширину, но отличаются цветом, тогда цвет определяется более приоритетным элементом в соответствии с приведенным в порядке уменьшения приоритета списком: ячейка, строка, группа строк, столбец, группа столбцов, таблица.


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

Следующие стили и разметка помогают проиллюстрировать каждое из четырех правил:

table {border-collapse: collapse;
border: 3px outset gray;}
td {border: 1px solid gray; padding: 0.5em;}
#r2c1, #r2c2 {border-style: hidden;}
#r1c1, #r1c4 {border-width: 5px;}
#r2c4 {border-style: double; border-width: 3px;}
#r3c4 {border-style: dotted; border-width: 2px;}
#r4c1 {border-bottom-style: hidden;}
#r4c3 {border-top: 13px solid silver;}





1-11-2 1-31-4
2-12-2 2-32-4
3-13-2 3-33-4
4-14-2 4-34-4


Рассмотрим по очереди, что происходит с каждой из ячеек:
• Для ячеек 1–1 и 1–4 рамки шириной пять пикселов были шире, чем рамки всех их соседей, поэтому они одержали верх не только над рамками смежных ячеек, но и над рамкой самой таблицы.


Единственное исключение – нижняя рамка ячейки 1–1, которая была скрыта.

• Нижняя рамка ячейки 1–1 была скрыта, потому что ячейки 2–1 и 2–2 с их явно скрытыми рамками полностью удалили все рамки по краям ячеек. Рамка таблицы (слева от ячейки 2–1) уступила место рамке ячейки. Нижняя рамка ячейки 4–1 также была скрыта, поэтому не допустила появления рамки под ячейкой.

• Двойная рамка ячейки 2–4 шириной три пиксела была перекрыта сплошной рамкой ячейки 1–4 шириной пять пикселов. Рамка ячейки 2–4 в свою очередь закрыла рамку ячейки 2–3, потому что была и шире, и «интересней». Ячейка 2–4 также перекрыла рамку ячейки 3–4, даже несмотря на одинаковую с ней ширину, потому что стиль double ячейки 2–4 определен как более приоритетный, чем рамка dotted ячейки 3–4.

• Нижняя серебряная рамка в 13 пикселов ячейки 3–3 не только перекрыла верхнюю рамку ячейки 4–3, но также повлияла на компоновку содержимого обеих ячеек и строк, в которых эти ячейки находятся.

• Сплошные рамки шириной один пиксел ячеек, расположенных по внешнему краю таблицы и не оформленных специальными стилями, перекрыты трехпиксельной выпуклой рамкой самого элемента table.


Это, кстати, практически так же сложно, как и выглядит, хотя схемы поведения во многом интуитивно понятны и приобретают несколько больший смысл при отработке на практике. Однако следует отметить, что базовое представление HTML-таблицы в Netscape первого поколения может быть получено с помощью довольно простого набора правил:

table {border-collapse: collapse; border: 2px outset gray;}
td {border: 1px inset gray;}

Оцените статью: (0 голосов)
0 5 0

Статьи из раздела CSS на эту тему:
Автоматическая компоновка
Анонимные объекты таблицы
Визуальная организация таблицы
Выравнивание
Высота

Вернуться в раздел: CSS / 11. Верстка таблиц