table-rules-001.html (1620B)
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-column-groups and table-row-groups</title> 7 <style> 8 table { 9 display: inline-table; 10 border-spacing: 10px 20px; 11 12 column-rule: 6px solid blue; 13 column-rule-extent: long; 14 column-rule-align: rule; 15 16 row-rule: 3px solid green; 17 row-rule-longitudinal-inset: 1px; 18 row-rule-align: rule; 19 20 background-color: lightgrey; 21 caption-side: bottom; 22 } 23 24 table:nth-of-type(2) { 25 column-rule-extent: all-long; 26 column-rule-edge-align: gap-over; 27 } 28 29 pre,caption { font-size: 10px; text-align: start; } 30 </style> 31 32 <pre>Note: column 2 is collapsed.</pre> 33 34 <table> 35 <caption>column-rule-extent: long</caption> 36 <colgroup> 37 <col> 38 <col style="visibility:collapse"> 39 </colgroup> 40 <colgroup><col width=100></colgroup> 41 <colgroup><col><col></colgroup> 42 <thead> 43 <tr><th>1</th><th>2</th><th>3</th><th>4</th><th>5</th> 44 </thead> 45 <tbody> 46 <tr><td>1</td><td>2</td><td>3</td><td>4</td><td>5</td> 47 <tr><td>1</td><td>2</td><td>3</td><td>4</td><td>5</td> 48 </tbody> 49 </table> 50 51 <table> 52 <caption>column-rule-extent: all-long;<br>column-rule-edge-align: gap-over</caption> 53 <colgroup> 54 <col> 55 <col style="visibility:collapse"> 56 </colgroup> 57 <colgroup><col width=100></colgroup> 58 <colgroup><col><col></colgroup> 59 <thead> 60 <tr><th>1</th><th>2</th><th>3</th><th>4</th><th>5</th> 61 </thead> 62 <tbody> 63 <tr><td>1</td><td>2</td><td>3</td><td>4</td><td>5</td> 64 <tr><td>1</td><td>2</td><td>3</td><td>4</td><td>5</td> 65 </tbody> 66 </table>