border-collapse-opacity-table-column-group.html 3.7 KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110
  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>Table background tests</title>
  6. <meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
  7. <meta http-equiv="Content-Style-Type" content="text/css">
  8. <style type="text/css">
  9. html, body { margin: 0; padding: 0; border: 0; font-size: 16px; }
  10. body { padding: 15px; }
  11. .o { opacity: 0.5; }
  12. table {
  13. margin: 0 3px 2px 4px; /* zero top to work around collapsing bug */
  14. border: transparent solid;
  15. border-width: 4px 2px 8px 6px; /* collapsed */
  16. padding: 3px 7px 8px 6px; /* ignored */
  17. border-collapse: collapse;
  18. }
  19. td {
  20. border: transparent solid;
  21. border-width: 2px 0 4px 2px; /* collapsed */
  22. padding: 1px 2px 4px 3px;
  23. empty-cells: show;
  24. }
  25. div { height: 10px; width: 50px; }
  26. table.color colgroup.t { background-color: aqua; }
  27. table.imagetl colgroup.t, table.imagebr colgroup.t {
  28. background-image: url(repeatable-diagonal-gradient-with-ticks.png);
  29. }
  30. table.imagetl colgroup.t { background-position: top left; /* default */ }
  31. table.imagebr colgroup.t { background-position: bottom right; /* default */ }
  32. </style>
  33. </head>
  34. <body>
  35. <table class="color">
  36. <colgroup><col></colgroup>
  37. <colgroup class="t o">
  38. <col>
  39. <col class="t">
  40. <col>
  41. </colgroup>
  42. <colgroup><col></colgroup>
  43. <tbody>
  44. <tr><td><div></div></td><td><div></div></td><td><div></div></td><td><div></div></td><td><div></div></td></tr>
  45. </tbody>
  46. <tbody class="t">
  47. <tr><td><div></div></td><td><div></div></td><td><div></div></td><td><div></div></td><td><div></div></td></tr>
  48. <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>
  49. <tr><td><div></div></td><td><div></div></td><td><div></div></td><td><div></div></td><td><div></div></td></tr>
  50. </tbody>
  51. <tbody>
  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. </table>
  55. <table class="imagetl">
  56. <colgroup><col></colgroup>
  57. <colgroup class="t o">
  58. <col>
  59. <col class="t">
  60. <col>
  61. </colgroup>
  62. <colgroup><col></colgroup>
  63. <tbody>
  64. <tr><td><div></div></td><td><div></div></td><td><div></div></td><td><div></div></td><td><div></div></td></tr>
  65. </tbody>
  66. <tbody class="t">
  67. <tr><td><div></div></td><td><div></div></td><td><div></div></td><td><div></div></td><td><div></div></td></tr>
  68. <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>
  69. <tr><td><div></div></td><td><div></div></td><td><div></div></td><td><div></div></td><td><div></div></td></tr>
  70. </tbody>
  71. <tbody>
  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. </table>
  75. <table class="imagebr">
  76. <colgroup><col></colgroup>
  77. <colgroup class="t">
  78. <col>
  79. <col class="t o">
  80. <col>
  81. </colgroup>
  82. <colgroup><col></colgroup>
  83. <tbody>
  84. <tr><td><div></div></td><td><div></div></td><td><div></div></td><td><div></div></td><td><div></div></td></tr>
  85. </tbody>
  86. <tbody class="t o">
  87. <tr><td><div></div></td><td><div></div></td><td><div></div></td><td><div></div></td><td><div></div></td></tr>
  88. <tr class="t o"><td><div></div></td><td><div></div></td><td class="t o"><div></div></td><td><div></div></td><td><div></div></td></tr>
  89. <tr><td><div></div></td><td><div></div></td><td><div></div></td><td><div></div></td><td><div></div></td></tr>
  90. </tbody>
  91. <tbody>
  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. </table>
  95. </body>
  96. </html>