| 123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103 |
- <rml>
- <head>
- <title>Table 01 ref</title>
- <link type="text/rcss" href="../../style.rcss"/>
- <meta name="Reference" content="Reference implemented using 'inline-blocks' instead. Row coloring does not work here. Might not be pixel accurate." />
- <style>
- table {
- display: block;
- border-width: 20dp 5dp 0;
- color: #333;
- text-align: center;
- margin: 0 auto;
- min-width: 100dp;
- max-width: 400dp;
- }
- body * {
- border-color: #666;
- }
- td {
- display: inline-block;
- box-sizing: border-box;
- padding: 15dp 5dp;
- width: 25%;
- height: 47dp;
- background: #3d3;
- }
- td.span2 { width: 50%; }
- td.span4 { width: 100%; }
- tr {
- display: block;
- }
- td:first-child {
- background: #6df;
- border-right-width: 3dp;
- }
- td:last-of-type {
- background: #dd3;
- }
- thead {
- display: block;
- color: black;
- background: #fff5;
- border-bottom: 3dp #666;
- }
- tbody {
- display: block;
- }
- tbody tr {
- border-bottom: 1dp #666a;
- }
- tbody tr:last-child {
- border-bottom: 0;
- }
- tbody tr:hover {
- background: #fff5;
- }
- tfoot {
- display: block;
- background: #666;
- color: #ccc;
- }
- tfoot td {
- padding-top: 0;
- padding-bottom: 0;
- text-align: right;
- height: 20dp;
- }
- </style>
- </head>
- <body>
- <table>
- <thead>
- <tr>
- <td>A</td>
- <td class="span2">B</td>
- <td>C</td>
- </tr>
- </thead>
- <tbody>
- <tr>
- <td>D</td>
- <td>E</td>
- <td>F</td>
- <td>G</td>
- </tr>
- <tr>
- <td>H</td>
- <td>I</td>
- <td>J</td>
- <td>K</td>
- </tr>
- </tbody>
- <tfoot>
- <tr>
- <td style="background: transparent" class="span4">[1] Footnote</td>
- </tr>
- </tfoot>
- </table>
- <handle size_target="#document"/>
- </body>
- </rml>
|