Разрешение конфликтов между границами

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

Какой тип границы " выиграет" в случае конфликта, определяется следующими правилами:

1. Границы, для свойства 'border-style' которых установлено значение 'hidden', имеют приоритет над всеми остальными конфликтующим границами. Все другие границы в указанном месте не отображаются.
2. У границ, имеющих стиль 'none', самый низкий приоритет. Только если свойства границ всех элементов, относящихся к этому краю, имеют значение 'none', границы не будет (но помните, что значение 'none' используется для стиля границы по умолчанию.)
3. Если ни один из стилей не имеет значение 'hidden' и хотя бы один из них имеет значение, отличное от 'none', " побеждают" более широкие границы. Если у нескольких границ свойства 'border-width' имеют одинаковые значения, стили применяются в следующем порядке: 'double', 'solid', 'dashed', 'dotted', 'ridge', 'outset', 'groove' и стиль с самым низким приоритетом 'inset'.
4. Если стили границ отличаются только цветом, тогда стиль, заданный для ячейки, имеет приоритет над стилем строки, стиль строки - над стилем группы строк, столбца, группы столбцов и таблицы.

Пример(ы):

В следующем примере показано применение этих правил иерархии. В результате использования таблицы стилей:

TABLE { border-collapse: collapse; border: 5px solid yellow; } *#col1 { border: 3px solid black; } TD { border: 1px solid red; padding: 1em; } TD.solid-blue { border: 5px dashed blue; } TD.solid-green { border: 5px solid green; }

к коду HTML:

< P> < TABLE> < COL id=" col1" > < COL id=" col2" > < COL id=" col3" > < TR id=" row1" > < TD> 1 < TD> 2 < TD> 3< /TR> < TR id=" row2" > < TD> 4 < TD class=" solid-blue" > 5 < TD class=" solid-green" > 6< /TR> < TR id=" row3" > < TD> 7 < TD> 8 < TD> 9< /TR> < TR id=" row4" > < TD> 10 < TD> 11 < TD> 12< /TR> < TR id=" row5" > < TD> 13 < TD> 14 < TD> 15< /TR> < /TABLE>

будет представлена примерно следующая таблица:

[D]

Пример таблицы с пересекающимися границами.

Пример(ы):

В следующем примере представлена таблица с горизонтальными линиями, разделяющими строки. Для верхней границы таблицы указано значение 'hidden', что обеспечивает отсутствие верхней границы первой строки. В результате будет использоваться атрибут " rules" HTML 4.0 (rules=" rows" ).

TABLE[rules=rows] TR { border-top: solid }TABLE[rules=rows] { border-collapse: collapse; border-top: hidden }

[D]

Таблица с горизонтальными линиями, разделяющими строки.

В данном случае такой же результат можно получить, не указывая значения 'hidden' для границы всей ТАБЛИЦЫ, а только для первой строки. Можно использовать любой способ.

TR: first-child { border-top: none }TR { border-top: solid }

Пример(ы):

Вот еще один пример пересекающихся границ:

[D]

Таблица с двумя отсутствующими внутренними границами.

HTML source:

< TABLE style=" border-collapse: collapse; border: solid; " > < TR> < TD style=" border-right: hidden; border-bottom: hidden" > foo< /TD> < TD style=" border: solid" > bar< /TD> < /TR> < TR> < TD style=" border: none" > foo< /TD> < TD style=" border: solid" > bar< /TD> < /TR> < /TABLE>

Стили границ

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

None

Граница отсутствует.

*hidden

Аналогично значению 'none', но в модели с пересекающимися границами имеет приоритет над любыми другими границами (см. раздел о конфликтах между границами).

Dotted

Граница представляется рядом точек.

Dashed

Граница представляется рядом коротких линейных сегментов.

Solid

Граница представляется единым сегментом линии.

Double

Граница представляется двумя сплошными линиями. Сумма толщины двух линий и расстояния между ними равно значению 'border-width'.

Groove

Граница выглядит вдавленной.

Ridge

В противоположность 'groove', граница выглядит выпуклой.

*inset

В модели с отдельными границами весь выглядит вдавленным. В модели с пересекающимися границами это значение дает тот же эффект, что и значение 'groove'.

*outset

В модели с отдельными границами весь блок выглядит выпуклым. В модели с пересекающимися границами это значение дает тот же эффект, что и значение 'ridge'.

⇐ Предыдущая12345

Поделиться: