row-group-order.html (1258B)
1 <!doctype html> 2 <title>CSS Test: Table section ordering</title> 3 <link rel="author" href="mailto:atotic@chromium.org"> 4 <link rel="help" href="https://www.w3.org/TR/CSS22/tables.html#table-display"> 5 <link rel="match" href="row-group-order-ref.html"> 6 <link rel="stylesheet" type="text/css" href="/fonts/ahem.css" /> 7 <style> 8 table { 9 font: 8px Ahem; 10 border-collapse: collapse; 11 } 12 thead, tbody, tfoot { 13 border: 10px solid; 14 } 15 .first { 16 border-color: green; 17 } 18 .second { 19 border-color: blue; 20 } 21 .third { 22 border-color: yellow; 23 } 24 tbody { 25 border-color: orange; 26 } 27 td { 28 width: 50px; 29 height: 50px; 30 } 31 </style> 32 33 <table> 34 <tbody> 35 <tr><td>body 1</td></tr> 36 </tbody> 37 <thead class="first"> 38 <tr><td>head 1</td></tr> 39 </thead> 40 <thead class="second"> 41 <tr><td>head 2</td></tr> 42 </thead> 43 <tbody> 44 <tr><td>body 2</td></tr> 45 </tbody> 46 <thead class="third"> 47 <tr><td>head 3</td></tr> 48 </thead> 49 <tfoot class="first"> 50 <tr><td>foot 1</td></tr> 51 </tfoot> 52 <tbody> 53 <tr><td>body 3</td></tr> 54 </tbody> 55 <tfoot class="second"> 56 <tr><td>foot 2</td></tr> 57 </tfoot> 58 <tbody> 59 <tr><td>body 4</td></tr> 60 </tbody> 61 <tfoot class="third"> 62 <tr><td>foot 3</td></tr> 63 </tfoot> 64 </table>