table-separate-4.html (1485B)
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 background-color: red; 13 border-collapse: separate; 14 position: absolute; 15 top: 645px; 16 } 17 thead { 18 background-color: pink; 19 } 20 tbody { 21 background-color: grey; 22 } 23 tfoot { 24 background-color: orange; 25 } 26 tr { 27 background-color: green; 28 } 29 td:first-child { 30 background-color: cyan; 31 } 32 td { 33 background-color: blue; 34 border-style: solid; 35 border-width: 5px; 36 border-color: gold; 37 } 38 colgroup { 39 background-color: purple; 40 } 41 col:first-child { 42 background-color: khaki; 43 } 44 .rel { 45 position: relative; 46 bottom: 215px; 47 } 48 </style> 49 </head> 50 <body> 51 <table> 52 <colgroup> 53 <col> 54 <col> 55 </colgroup> 56 <thead class="rel"> 57 <tr> 58 <td class="rel">XXX</td> 59 <td class="rel">YYY</td> 60 </tr> 61 </thead> 62 <tbody class="rel"> 63 <tr> 64 <td class="rel">XXX</td> 65 <td>YYY</td> 66 </tr> 67 <tr> 68 <td>XXX</td> 69 <td rowspan=2 class="rel">YYY</td> 70 </tr> 71 <tr class="rel"> 72 <td class="rel">XXX</td> 73 </tr> 74 <tr> 75 <td colspan=2 class="rel">XXX</td> 76 </tr> 77 </tbody> 78 <tfoot> 79 <tr> 80 <td class="rel">XXX</td> 81 <td>YYY</td> 82 </tr> 83 </tfoot> 84 </table> 85 </body>