tor-browser

The Tor Browser
git clone https://git.dasho.dev/tor-browser.git
Log | Files | Refs | README | LICENSE

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>