table_01-ref.rml 1.6 KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103
  1. <rml>
  2. <head>
  3. <title>Table 01 ref</title>
  4. <link type="text/rcss" href="../../style.rcss"/>
  5. <meta name="Reference" content="Reference implemented using 'inline-blocks' instead. Row coloring does not work here. Might not be pixel accurate." />
  6. <style>
  7. table {
  8. display: block;
  9. border-width: 20dp 5dp 0;
  10. color: #333;
  11. text-align: center;
  12. margin: 0 auto;
  13. min-width: 100dp;
  14. max-width: 400dp;
  15. }
  16. body * {
  17. border-color: #666;
  18. }
  19. td {
  20. display: inline-block;
  21. box-sizing: border-box;
  22. padding: 15dp 5dp;
  23. width: 25%;
  24. height: 47dp;
  25. background: #3d3;
  26. }
  27. td.span2 { width: 50%; }
  28. td.span4 { width: 100%; }
  29. tr {
  30. display: block;
  31. }
  32. td:first-child {
  33. background: #6df;
  34. border-right-width: 3dp;
  35. }
  36. td:last-of-type {
  37. background: #dd3;
  38. }
  39. thead {
  40. display: block;
  41. color: black;
  42. background: #fff5;
  43. border-bottom: 3dp #666;
  44. }
  45. tbody {
  46. display: block;
  47. }
  48. tbody tr {
  49. border-bottom: 1dp #666a;
  50. }
  51. tbody tr:last-child {
  52. border-bottom: 0;
  53. }
  54. tbody tr:hover {
  55. background: #fff5;
  56. }
  57. tfoot {
  58. display: block;
  59. background: #666;
  60. color: #ccc;
  61. }
  62. tfoot td {
  63. padding-top: 0;
  64. padding-bottom: 0;
  65. text-align: right;
  66. height: 20dp;
  67. }
  68. </style>
  69. </head>
  70. <body>
  71. <table>
  72. <thead>
  73. <tr>
  74. <td>A</td>
  75. <td class="span2">B</td>
  76. <td>C</td>
  77. </tr>
  78. </thead>
  79. <tbody>
  80. <tr>
  81. <td>D</td>
  82. <td>E</td>
  83. <td>F</td>
  84. <td>G</td>
  85. </tr>
  86. <tr>
  87. <td>H</td>
  88. <td>I</td>
  89. <td>J</td>
  90. <td>K</td>
  91. </tr>
  92. </tbody>
  93. <tfoot>
  94. <tr>
  95. <td style="background: transparent" class="span4">[1] Footnote</td>
  96. </tr>
  97. </tfoot>
  98. </table>
  99. <handle size_target="#document"/>
  100. </body>
  101. </rml>