border-collapse-table-row.html 3.9 KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112
  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 8px 6px; /* collapsed */
  19. padding: 3px 7px 8px 6px; /* ignored */
  20. border-collapse: collapse;
  21. }
  22. td {
  23. border: transparent solid;
  24. border-width: 2px 0 4px 2px; /* collapsed */
  25. padding: 1px 2px 4px 3px;
  26. empty-cells: show;
  27. }
  28. div { height: 10px; width: 50px; }
  29. table.color tr.t { background-color: aqua; }
  30. table.imagetl tr.t, table.imagebr tr.t {
  31. background-image: url(repeatable-diagonal-gradient-with-ticks.png);
  32. }
  33. table.imagetl tr.t { background-position: top left; /* default */ }
  34. table.imagebr tr.t { background-position: bottom right; /* default */ }
  35. </style>
  36. </head>
  37. <body>
  38. <table class="color">
  39. <colgroup><col></colgroup>
  40. <colgroup class="t">
  41. <col>
  42. <col class="t">
  43. <col>
  44. </colgroup>
  45. <colgroup><col></colgroup>
  46. <tbody>
  47. <tr><td><div></div></td><td><div></div></td><td><div></div></td><td><div></div></td><td><div></div></td></tr>
  48. </tbody>
  49. <tbody class="t">
  50. <tr><td><div></div></td><td><div></div></td><td><div></div></td><td><div></div></td><td><div></div></td></tr>
  51. <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>
  52. <tr><td><div></div></td><td><div></div></td><td><div></div></td><td><div></div></td><td><div></div></td></tr>
  53. </tbody>
  54. <tbody>
  55. <tr><td><div></div></td><td><div></div></td><td><div></div></td><td><div></div></td><td><div></div></td></tr>
  56. </tbody>
  57. </table>
  58. <table class="imagetl">
  59. <colgroup><col></colgroup>
  60. <colgroup class="t">
  61. <col>
  62. <col class="t">
  63. <col>
  64. </colgroup>
  65. <colgroup><col></colgroup>
  66. <tbody>
  67. <tr><td><div></div></td><td><div></div></td><td><div></div></td><td><div></div></td><td><div></div></td></tr>
  68. </tbody>
  69. <tbody class="t">
  70. <tr><td><div></div></td><td><div></div></td><td><div></div></td><td><div></div></td><td><div></div></td></tr>
  71. <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>
  72. <tr><td><div></div></td><td><div></div></td><td><div></div></td><td><div></div></td><td><div></div></td></tr>
  73. </tbody>
  74. <tbody>
  75. <tr><td><div></div></td><td><div></div></td><td><div></div></td><td><div></div></td><td><div></div></td></tr>
  76. </tbody>
  77. </table>
  78. <table class="imagebr">
  79. <colgroup><col></colgroup>
  80. <colgroup class="t">
  81. <col>
  82. <col class="t">
  83. <col>
  84. </colgroup>
  85. <colgroup><col></colgroup>
  86. <tbody>
  87. <tr><td><div></div></td><td><div></div></td><td><div></div></td><td><div></div></td><td><div></div></td></tr>
  88. </tbody>
  89. <tbody class="t">
  90. <tr><td><div></div></td><td><div></div></td><td><div></div></td><td><div></div></td><td><div></div></td></tr>
  91. <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>
  92. <tr><td><div></div></td><td><div></div></td><td><div></div></td><td><div></div></td><td><div></div></td></tr>
  93. </tbody>
  94. <tbody>
  95. <tr><td><div></div></td><td><div></div></td><td><div></div></td><td><div></div></td><td><div></div></td></tr>
  96. </tbody>
  97. </table>
  98. </body>
  99. </html>