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