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

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