table-row-group-rules-001.html (2691B)
1 <!doctype html> 2 <!-- 3 Any copyright is dedicated to the Public Domain. 4 http://creativecommons.org/publicdomain/zero/1.0/ 5 --> 6 <title>Example of rules between table-rows and table-cells</title> 7 <style> 8 table { 9 display: inline-table; 10 border-spacing: 10px 20px; 11 background-color: lightgrey; 12 caption-side: bottom; 13 } 14 15 thead, tfoot, tbody { 16 column-rule: solid magenta; 17 column-rule-extent: long; 18 19 row-rule: solid orange; 20 row-rule-extent: long; 21 row-rule-align: rule; 22 } 23 24 thead { 25 column-rule-color: brown; 26 } 27 28 table > .all-long { 29 column-rule-extent: all-long; 30 row-rule-extent: all-long; 31 row-rule-align: rule-over; 32 } 33 34 table.rules { 35 column-rule: 6px solid blue; 36 column-rule-extent: long; 37 column-rule-align: rule; 38 39 row-rule: 3px solid green; 40 row-rule-longitudinal-inset: 1px; 41 row-rule-align: rule; 42 } 43 table.rules.all-long { 44 column-rule-extent: all-long; 45 column-rule-edge-align: gap-over; 46 } 47 48 pre,caption { font-size: 10px; text-align: start; } 49 </style> 50 51 <table> 52 <caption>*-rule-extent: long</caption> 53 <colgroup><col><col></colgroup> 54 <colgroup><col width=100><col></colgroup> 55 <thead> 56 <tr><th>1</th><th>2</th><th>3</th><th>4</th><th>5</th> 57 </thead> 58 <tbody> 59 <tr><td>1</td><td>2</td><td>3</td><td>4</td><td rowspan=2>5</td> 60 <tr><td colspan=2>1,2</td><td>3</td><td>4</td> 61 </tbody> 62 </table> 63 64 <table> 65 <caption>*-rule-extent: all-long;<br>row-rule-align: rule-over<br></caption> 66 <colgroup><col><col></colgroup> 67 <colgroup><col width=100><col></colgroup> 68 <thead class="all-long"> 69 <tr><th>1</th><th>2</th><th>3</th><th>4</th><th>5</th> 70 </thead> 71 <tbody class="all-long"> 72 <tr><td>1</td><td>2</td><td>3</td><td>4</td><td rowspan=2>5</td> 73 <tr><td colspan=2>1,2</td><td>3</td><td>4</td> 74 </tbody> 75 </table> 76 77 <br> 78 <br> 79 <pre>Same thing, now with table rules from the last example also applied:</pre> 80 81 <table class="rules"> 82 <caption>*-rule-extent: long</caption> 83 <colgroup><col><col></colgroup> 84 <colgroup><col width=100><col></colgroup> 85 <thead> 86 <tr><th>1</th><th>2</th><th>3</th><th>4</th><th>5</th> 87 </thead> 88 <tbody> 89 <tr><td>1</td><td>2</td><td>3</td><td>4</td><td rowspan=2>5</td> 90 <tr><td colspan=2>1,2</td><td>3</td><td>4</td> 91 </tbody> 92 </table> 93 94 <table class="rules all-long"> 95 <caption>*-rule-extent: all-long;<br>row-rule-align: rule-over<br></caption> 96 <colgroup><col><col></colgroup> 97 <colgroup><col width=100><col></colgroup> 98 <thead class="all-long"> 99 <tr><th>1</th><th>2</th><th>3</th><th>4</th><th>5</th> 100 </thead> 101 <tbody class="all-long"> 102 <tr><td>1</td><td>2</td><td>3</td><td>4</td><td rowspan=2>5</td> 103 <tr><td colspan=2>1,2</td><td>3</td><td>4</td> 104 </tbody> 105 </table>