Slyweb
На разработку сайта! Скидки 50%!
Поиск CSS свойств и HTML элементов:
поиск



Все CSS свойства и HTML элементы справочника
border-collapse

collapse создаёт объединенные рамки
separate создаёт разъединенные рамки

  1.<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0//EN">
  2.<HTML>
  3. <HEAD>
  4. <TITLE>Свойство border-collapse</TITLE>
  5. <STYLE type="text/css">
  6. TABLE {
  7. background: #CCC;
  8. border-collapse: separate;
  9. width:400px;
10. height:200px; }
11. TD {
12. background: #ccc;
13. border: solid black; }
14.
15. </STYLE>
16. </HEAD>
17. <BODY>
18. <TABLE>
19. <TR >
20. <TD style="visibility:collapse;"> Свойство border-collapse.
21. <TD style="height:100px;"> Свойство border-collapse.
22. <TD> Свойство border-collapse.
23. <TD> Свойство border-collapse.
24. </TR>
25. <TR style="visibility:collapse;">
26.
27. <TD > Свойство border-collapse.
28. <TD > Свойство border-collapse.
29. <TD> Свойство border-collapse.
30. <TD> Свойство border-collapse.
31. </TR>
32. <TR>
33.
34. <TD> Свойство border-collapse.
35. <TD> Свойство border-collapse.
36. <TD> Свойство border-collapse.
37. <TD> Свойство border-collapse.
38. </TR>
39. </TABLE>
40. </BODY>
41.</HTML>
42.
Свойство border-collapse
Свойство border-collapse

При применении свойства border-collapse рамки элементов таблицы могут иметь различное значение цвета, размера и, поэтому конфликтовать между собой.

Для недопущения конфликтных ситуаций в CSS предусмотрены специальные правила:

  1. Рамки со свойством border-style:hidden имеют большее значение над другими свойствами, применяемыми к рамкам. Любые рамки для элементов с данным значением подавляют их появление в таблице.
  2. Рамки со свойством border-style:none имеют самое низкое значение. При этом значении рамки будут отсутствовать на тех сторонах элемента, с которыми не граничат другие элементы, либо если граничат, но для них так же применено свойство border-style:none. См. Пример 92.
  3. Если элементы таблицы имеют рамки разных типов, то рамки указанные раньше будут иметь больший приоритет над рамками указанными позже при использовании следующей последовательности: double, solid, dashed, dotted, ridge, outset, groove и inset.
  4. При конфликте цветов рамок, рамка последующей ячейки имеет меньший приоритет над рамкой предшествующей ячейки.
  1.<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0//EN">
  2.<HTML>
  3. <HEAD>
  4. <TITLE>Свойство border-style:hidden</TITLE>
  5.<STYLE type="text/css">
  6. TABLE {
  7. background: #CCC;
  8. border-collapse: collapse;
  9. border-spacing: 15pt;
10. width:200px;
11. height:200px;
12. empty-cells: hide; }
13. TD {
14. background: #ccc;
15. border: solid black; }
16.</STYLE>
17. </HEAD>
18. <BODY>
19. <TABLE>
20. <TR >
21. <TD style="border-style:hidden;">
22. Свойство border-style:hidden
23. имеет больший приоритет при установки рамок
24. <TD style="border-style:none;">
25. Свойство border-style:none
26. имеет меньший приоритет при установки рамок
27. <TD> Свойство border-collapse.
28. <TD> Свойство border-collapse.
29. </TR>
30. <TR>
31.
32. <TD > Свойство border-collapse.
33. <TD > Свойство border-collapse.
34. <TD> Свойство border-collapse.
35. <TD> Свойство border-collapse.
36. </TR>
37. <TR>
38.
39. <TD> Свойство border-collapse.
40. <TD> Свойство border-collapse.
41. <TD> Свойство border-collapse.
42. <TD> Свойство border-collapse.
43. </TR>
44. </TABLE>
45. </BODY>
46.</HTML>
47.
Пример 92.
Пример 92.

К табличным элементам могу применяться псевдо-селекторы типа :first-child, :last-child

  1.TR:first-child { border-top: none }

Горизонтальная линия между строками:

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


Доступ и установка с jQuery

  • Получить свойство borderCollapse: val = $("div").css("borderCollapse");
  • Установить свойство borderCollapse: $("div").css({"borderCollapse":"..."});
  • Установить свойство borderCollapse: $("div").css("borderCollapse","...");
  • Как использовать популярный jQuery для свойств CSS, - читайте статью "jQuery для начинающих".
Александр Ермаков. Хостинг - www.pwstudio.org