sideways-lr-row-progression-1b.html (1438B)
1 <!DOCTYPE html> 2 <title>CSS Test: sideways-lr Table Row/Rowgroup/Cell Ordering</title> 3 <link rel="author" title="Jonathan Kew" href="mailto:jfkthame@gmail.com"> 4 <meta name="assert" content="This test checks that sideways-lr tables order rows/rowgroups left to right and cells top-to-bottom (RTL) per 'direction'."> 5 <link rel="help" href="http://www.w3.org/TR/css-writing-modes-3/#writing-mode"> 6 <!-- based on vertical-rl Table Row/Rowgroup/Cell Ordering tests by Elika J. Etemad --> 7 8 <style> 9 .test { 10 writing-mode: sideways-lr; 11 direction: rtl; 12 } 13 14 table { 15 border-spacing: 0; 16 margin: 1em; 17 } 18 td { 19 width: 1em; 20 height: 1em; 21 border: solid gray; 22 } 23 24 .a { background: navy} 25 .b { background: blue } 26 .c { background: aqua } 27 .d { background: teal } 28 .e { background: purple } 29 .f { background: fuchsia } 30 .g { background: yellow } 31 .h { background: orange } 32 </style> 33 34 <table class="test"> 35 <thead> 36 <tr> 37 <td colspan=2> 38 <td class="b"> 39 <td class="a"> 40 </tr> 41 </thead> 42 <tfoot> 43 <tr> 44 <td class="d"> 45 <td class="c"> 46 <td colspan=2> 47 </tr> 48 </tfoot> 49 <tbody> 50 <tr> 51 <td class="e"> 52 <td colspan=2> 53 <td rowspan=3> 54 </tr> 55 <tr> 56 <td rowspan=2 colspan=2> 57 <td class="f"> 58 </tr> 59 <tr> 60 <td class="g"> 61 </tr> 62 </tbody> 63 <tbody> 64 <tr> 65 <td colspan=3> 66 <td class="h"> 67 </tr> 68 </tbody> 69 </table>