table_04.rml 1.5 KB

12345678910111213141516171819202122232425262728293031323334353637383940414243444546474849505152
  1. <rml>
  2. <head>
  3. <title>Table 04 - Table height algorithm</title>
  4. <link type="text/rcss" href="../style.rcss"/>
  5. <link rel="help" href="https://www.w3.org/TR/2011/REC-CSS2-20110607/tables.html" />
  6. <meta name="Description" content="Flexible row heights mixed with 'auto' row height and minimum/maximum constraints." />
  7. <meta name="Assert (initial size)" content="Row 1 should be formatted according to its content height. Row 2 should be twice as high as Row 3." />
  8. <meta name="Assert (resizing down)" content="The height of Row 2 and 3 should scale down until they meet their minimum height. The table height should not change with any further downsizing." />
  9. <meta name="Assert (resizing up)" content="When Row 2 and 3 meet their maximum height, Row 1 should increase in size until it meets its maximum height. When Row 1 also meets its maximum height, the table should fill empty space at the bottom." />
  10. <style>
  11. table {
  12. border-width: 20dp 5dp;
  13. border-color: #666;
  14. color: #333;
  15. text-align: center;
  16. gap: 5dp 3dp;
  17. height: 50%;
  18. min-width: 150dp;
  19. }
  20. td {
  21. padding: 15dp 5dp;
  22. border: 1dp #f335;
  23. vertical-align: middle;
  24. }
  25. tr {
  26. border: 5dp #ff02;
  27. min-height: 60dp;
  28. max-height: 120dp;
  29. }
  30. </style>
  31. </head>
  32. <body>
  33. <table>
  34. <tr>
  35. <td rowspan="2">A</td>
  36. <td colspan="2">B1<br/>B2</td>
  37. <td>C</td>
  38. </tr>
  39. <tr style="height: 200%; max-height: 240dp;">
  40. <td>D</td>
  41. <td>E</td>
  42. <td rowspan="2">F</td>
  43. </tr>
  44. <tr style="height: 100%;">
  45. <td colspan="2">G</td>
  46. <td>H</td>
  47. </tr>
  48. </table>
  49. <handle size_target="#document"/>
  50. </body>
  51. </rml>