border-separate-table-row.html 3.9 KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113
  1. <!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01//EN"
  2. "http://www.w3.org/TR/html4/strict.dtd">
  3. <html lang="en-US">
  4. <head>
  5. <title>CSS 2.1 Test Suite: table backgrounds</title>
  6. <link rel="author" title="L. David Baron" href="https://dbaron.org/" />
  7. <link rel="author" title="Mozilla Corporation" href="http://mozilla.com/" />
  8. <link rel="help" href="http://www.w3.org/TR/CSS21/tables.html#table-layers"/>
  9. <meta name="flags" content="" />
  10. <meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
  11. <meta http-equiv="Content-Style-Type" content="text/css">
  12. <style type="text/css">
  13. html, body { margin: 0; padding: 0; border: 0; font-size: 16px; }
  14. body { padding: 15px; }
  15. table {
  16. margin: 0 3px 2px 4px; /* zero top to work around collapsing bug */
  17. border: transparent solid;
  18. border-width: 4px 2px 7px 3px;
  19. padding: 3px 7px 8px 6px;
  20. border-collapse: separate;
  21. border-spacing: 2px 3px;
  22. }
  23. td {
  24. border: transparent solid;
  25. border-width: 2px 1px 4px 3px;
  26. padding: 1px 2px 4px 3px;
  27. empty-cells: show;
  28. }
  29. div { height: 10px; width: 50px; }
  30. table.color tr.t { background-color: aqua; }
  31. table.imagetl tr.t, table.imagebr tr.t {
  32. background-image: url(repeatable-diagonal-gradient-with-ticks.png);
  33. }
  34. table.imagetl tr.t { background-position: top left; /* default */ }
  35. table.imagebr tr.t { background-position: bottom right; /* default */ }
  36. </style>
  37. </head>
  38. <body>
  39. <table class="color">
  40. <colgroup><col></colgroup>
  41. <colgroup class="t">
  42. <col>
  43. <col class="t">
  44. <col>
  45. </colgroup>
  46. <colgroup><col></colgroup>
  47. <tbody>
  48. <tr><td><div></div></td><td><div></div></td><td><div></div></td><td><div></div></td><td><div></div></td></tr>
  49. </tbody>
  50. <tbody class="t">
  51. <tr><td><div></div></td><td><div></div></td><td><div></div></td><td><div></div></td><td><div></div></td></tr>
  52. <tr class="t"><td><div></div></td><td><div></div></td><td class="t"><div></div></td><td><div></div></td><td><div></div></td></tr>
  53. <tr><td><div></div></td><td><div></div></td><td><div></div></td><td><div></div></td><td><div></div></td></tr>
  54. </tbody>
  55. <tbody>
  56. <tr><td><div></div></td><td><div></div></td><td><div></div></td><td><div></div></td><td><div></div></td></tr>
  57. </tbody>
  58. </table>
  59. <table class="imagetl">
  60. <colgroup><col></colgroup>
  61. <colgroup class="t">
  62. <col>
  63. <col class="t">
  64. <col>
  65. </colgroup>
  66. <colgroup><col></colgroup>
  67. <tbody>
  68. <tr><td><div></div></td><td><div></div></td><td><div></div></td><td><div></div></td><td><div></div></td></tr>
  69. </tbody>
  70. <tbody class="t">
  71. <tr><td><div></div></td><td><div></div></td><td><div></div></td><td><div></div></td><td><div></div></td></tr>
  72. <tr class="t"><td><div></div></td><td><div></div></td><td class="t"><div></div></td><td><div></div></td><td><div></div></td></tr>
  73. <tr><td><div></div></td><td><div></div></td><td><div></div></td><td><div></div></td><td><div></div></td></tr>
  74. </tbody>
  75. <tbody>
  76. <tr><td><div></div></td><td><div></div></td><td><div></div></td><td><div></div></td><td><div></div></td></tr>
  77. </tbody>
  78. </table>
  79. <table class="imagebr">
  80. <colgroup><col></colgroup>
  81. <colgroup class="t">
  82. <col>
  83. <col class="t">
  84. <col>
  85. </colgroup>
  86. <colgroup><col></colgroup>
  87. <tbody>
  88. <tr><td><div></div></td><td><div></div></td><td><div></div></td><td><div></div></td><td><div></div></td></tr>
  89. </tbody>
  90. <tbody class="t">
  91. <tr><td><div></div></td><td><div></div></td><td><div></div></td><td><div></div></td><td><div></div></td></tr>
  92. <tr class="t"><td><div></div></td><td><div></div></td><td class="t"><div></div></td><td><div></div></td><td><div></div></td></tr>
  93. <tr><td><div></div></td><td><div></div></td><td><div></div></td><td><div></div></td><td><div></div></td></tr>
  94. </tbody>
  95. <tbody>
  96. <tr><td><div></div></td><td><div></div></td><td><div></div></td><td><div></div></td><td><div></div></td></tr>
  97. </tbody>
  98. </table>
  99. </body>
  100. </html>