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