table-collapse-3-ref.html (3868B)
1 <!DOCTYPE html> 2 <head> 3 <style> 4 html { 5 line-height: 1.25; 6 } 7 body { 8 background-color: white; 9 margin: 0; 10 } 11 table { 12 border-collapse: collapse; 13 position: absolute; 14 } 15 #first-table { 16 top: 0px; 17 } 18 #second-table { 19 top: 175px; 20 } 21 #third-table { 22 top: 350px; 23 } 24 #fourth-table { 25 top: 525px; 26 } 27 td { 28 padding: 0; 29 border-style: solid; 30 border-width: 5px; 31 border-color: transparent; 32 color: rgba(0,0,0,0); 33 } 34 #first-table td { 35 border-color: gold; 36 } 37 .bg-blue { 38 background-color: blue; 39 } 40 .bg-cyan { 41 background-color: cyan; 42 } 43 .bg-grey { 44 background-color: grey; 45 } 46 .bg-green { 47 background-color: green; 48 } 49 .bg-khaki { 50 background-color: khaki; 51 } 52 .bg-purple { 53 background-color: purple; 54 } 55 .bg-white { 56 background-color: white; 57 } 58 .show-text { 59 color: rgba(0,0,0,1); 60 } 61 </style> 62 </head> 63 <body> 64 <table id="first-table"> 65 <thead> 66 <tr> 67 <td class="bg-khaki">XXX</td> 68 <td class="bg-purple">YYY</td> 69 </tr> 70 </thead> 71 <tbody> 72 <tr> 73 <td class="bg-khaki">XXX</td> 74 <td class="bg-purple">YYY</td> 75 </tr> 76 <tr> 77 <td class="bg-khaki">XXX</td> 78 <td rowspan=2 class="bg-purple">YYY</td> 79 </tr> 80 <tr> 81 <td class="bg-khaki">XXX</td> 82 </tr> 83 <tr> 84 <td colspan=2 class="bg-khaki">XXX</td> 85 </tr> 86 </tbody> 87 <tfoot> 88 <tr> 89 <td class="bg-green">XXX</td> 90 <td class="bg-blue show-text">YYY</td> 91 </tr> 92 </tfoot> 93 </table> 94 <table id="second-table"> 95 <thead> 96 <tr> 97 <td class="bg-green">XXX</td> 98 <td class="bg-green">YYY</td> 99 </tr> 100 </thead> 101 <tbody> 102 <tr> 103 <td class="bg-green">XXX</td> 104 <td class="bg-blue show-text">YYY</td> 105 </tr> 106 <tr> 107 <td class="bg-cyan show-text">XXX</td> 108 <td rowspan=2 class="bg-green">YYY</td> 109 </tr> 110 <tr> 111 <td class="bg-grey show-text"> </td> 112 </tr> 113 <tr> 114 <td colspan=2 class="bg-green">XXX</td> 115 </tr> 116 </tbody> 117 <tfoot> 118 <tr> 119 <td><div class="bg-cyan show-text">XXX</div></td> 120 <td class="bg-white show-text"> </td> 121 </tr> 122 </tfoot> 123 </table> 124 <table id="third-table"> 125 <thead> 126 <tr> 127 <td><div class="bg-cyan show-text">XXX</div></td> 128 <td><div class="bg-blue show-text">YYY</div></td> 129 </tr> 130 </thead> 131 <tbody> 132 <tr> 133 <td><div class="bg-cyan show-text">XXX</div></td> 134 <td class="bg-white">YYY</td> 135 </tr> 136 <tr> 137 <td class="bg-white">XXX</td> 138 <td rowspan=2><div class="bg-blue show-text" style="padding: 12.5px 0">YYY</div></td> 139 </tr> 140 <tr> 141 <td class="bg-green">XXX</td> 142 </tr> 143 <tr> 144 <td colspan=2><div class="bg-cyan show-text">XXX</div></td> 145 </tr> 146 </tbody> 147 <tfoot> 148 <tr> 149 <td class="bg-white">XXX</td> 150 <td class="bg-white">YYY</td> 151 </tr> 152 </tfoot> 153 </table> 154 <table id="fourth-table"> 155 <thead> 156 <tr> 157 <td class="bg-white">XXX</td> 158 <td class="bg-white">YYY</td> 159 </tr> 160 </thead> 161 <tbody> 162 <tr> 163 <td class="bg-white">XXX</td> 164 <td class="bg-white">YYY</td> 165 </tr> 166 <tr> 167 <td class="bg-white">XXX</td> 168 <td class="bg-white" rowspan=2>YYY</td> 169 </tr> 170 <tr> 171 <td><div class="bg-cyan show-text">XXX</div></td> 172 </tr> 173 <tr> 174 <td class="bg-white" colspan=2>XXX</td> 175 </tr> 176 </tbody> 177 <tfoot> 178 <tr> 179 <td class="bg-white">XXX</td> 180 <td class="bg-white">YYY</td> 181 </tr> 182 </tfoot> 183 </table> 184 </body>