Strona główna Odkrywaj Pomoc
Zaloguj się
cpp
/
RmlUi
kopia lustrzana https://github.com/mikke89/RmlUi.git
2
0
Forkuj 0
Pliki Problemy 0 Wiki
Gałąź: improve-expand-string
Gałęzie Tagi
RmlUi
/
Tests
/
Data
/
VisualTests
/
table_03.rml

table_03.rml 1.9 KB
Bezpośredni odnośnik Historia Czysty

12345678910111213141516171819202122232425262728293031323334353637383940414243444546474849505152535455565758596061626364656667686970717273747576777879808182 
  1. <rml>
    2. 

  2. <head>
    3. 

  3. 	<title>Table 03</title>
    4. 

  4. 	<link type="text/rcss" href="../style.rcss"/>
    5. 

  5. 	<link rel="help" href="https://www.w3.org/TR/2011/REC-CSS2-20110607/tables.html" />
    6. 

  6. 	<meta name="Description" content="Test various table features." />
    7. 

  7. 	<style>
    8. 

  8. 		table {
    9. 

  9. 			box-sizing: border-box;
    10. 

  10. 			display: table;
    11. 

  11. 			border: 5dp #666;
    12. 

  12. 			gap: 10dp 2%;
    13. 

  13. 			height: 50%;
    14. 

  14. 			padding-left: 5dp;
    15. 

  15. 			padding-right: 20dp;
    16. 

  16. 		}
    17. 

  17. 		col {
    18. 

  18. 			box-sizing: border-box;
    19. 

  19. 			display: table-column;
    20. 

  20. 			background: #aac;
    21. 

  21. 			border-left: 2dp #e3e;
    22. 

  22. 			border-right: 5dp #3ce;
    23. 

  23. 			margin: 15dp 0;
    24. 

  24. 		}
    25. 

  25. 		col:first-child {
    26. 

  26. 			border-left-width: 0;
    27. 

  27. 		}
    28. 

  28. 		col:last-of-type {
    29. 

  29. 			border-right-width: 0;
    30. 

  30. 		}
    31. 

  31. 		tr {
    32. 

  32. 			box-sizing: border-box;
    33. 

  33. 			display: table-row;
    34. 

  34. 			border-top: 5dp #ec3;
    35. 

  35. 			background: #acc;
    36. 

  36. 			padding-top: 5dp;
    37. 

  37. 			padding-bottom: 15dp;
    38. 

  38. 			margin: 10dp 20dp;
    39. 

  39. 		}
    40. 

  40. 		td {
    41. 

  41. 			box-sizing: border-box;
    42. 

  42. 			display: table-cell;
    43. 

  43. 			border-right: 5dp red;
    44. 

  44. 			background: #bbb;
    45. 

  45. 		}
    46. 

  46. 		.bottom-right {
    47. 

  47. 			position: absolute;
    48. 

  48. 			display: inline;
    49. 

  49. 			height: 15dp;
    50. 

  50. 			right: 20dp;
    51. 

  51. 		}
    52. 

  52. 	</style>
    53. 

  53. </head>
    54. 

  54. 

  55. <body>
    56. 

  56. <p>Try resizing the table using the document handle in the lower-right corner.</p>
    57. 

  57. <table>
    58. 

  58. 	<col span="2" style="min-width: 150dp; max-width: 250dp;"/>
    59. 

  59. 	<col/>
    60. 

  60. 	<col style="min-width: 50dp; max-width: 300dp;"/>
    61. 

  61. 	<tr>
    62. 

  62. 		<td rowspan="2" colspan="2">Hello</td>
    63. 

  63. 		<td>Whoop!</td>
    64. 

  64. 		<td>World Hi!</td>
    65. 

  65. 	</tr>
    66. 

  66. 	<tr>
    67. 

  67. 		<td colspan="2">World<br/>Hi!</td>
    68. 

  68. 	</tr>
    69. 

  69. 	<tr>
    70. 

  70. 		<td style="height: 50%;">Cat<div class="bottom-right">X</div></td>
    71. 

  71. 		<td style="padding-left: 30dp; padding-top: 50dp; position: relative" colspan="2">Mouse<div class="bottom-right">Y</div></td>
    72. 

  72. 		<td style="border-left: 5dp green; border-right-width: 2dp; vertical-align: bottom" rowspan="2">RatTTTTTTTTTTTTTTTTTTTTTTTTTTTTTTTTTTTTTTT</td>
    73. 

  73. 	</tr>
    74. 

  74. 	<tr>
    75. 

  75. 		<td style="vertical-align: bottom;">Row<br/>Row</td>
    76. 

  76. 		<td colspan="2">3</td>
    77. 

  77. 	</tr>
    78. 

  78. </table>
    79. 

  79. <p style="text-align: center;">Paragraph after table.</p>
    80. 

  80. <handle size_target="#document"/>
    81. 

  81. </body>
    82. 

  82. </rml>
    83.