mirror of
https://github.com/GabsPuNs/Project-Zenith-Main.git
synced 2026-07-17 04:20:41 +00:00
83 lines
1.9 KiB
Plaintext
83 lines
1.9 KiB
Plaintext
<rml>
|
|
<head>
|
|
<title>Table 03</title>
|
|
<link type="text/rcss" href="../style.rcss"/>
|
|
<link rel="help" href="https://www.w3.org/TR/2011/REC-CSS2-20110607/tables.html" />
|
|
<meta name="Description" content="Test various table features." />
|
|
<style>
|
|
table {
|
|
box-sizing: border-box;
|
|
display: table;
|
|
border: 5dp #666;
|
|
gap: 10dp 2%;
|
|
height: 50%;
|
|
padding-left: 5dp;
|
|
padding-right: 20dp;
|
|
}
|
|
col {
|
|
box-sizing: border-box;
|
|
display: table-column;
|
|
background: #aac;
|
|
border-left: 2dp #e3e;
|
|
border-right: 5dp #3ce;
|
|
margin: 15dp 0;
|
|
}
|
|
col:first-child {
|
|
border-left-width: 0;
|
|
}
|
|
col:last-of-type {
|
|
border-right-width: 0;
|
|
}
|
|
tr {
|
|
box-sizing: border-box;
|
|
display: table-row;
|
|
border-top: 5dp #ec3;
|
|
background: #acc;
|
|
padding-top: 5dp;
|
|
padding-bottom: 15dp;
|
|
margin: 10dp 20dp;
|
|
}
|
|
td {
|
|
box-sizing: border-box;
|
|
display: table-cell;
|
|
border-right: 5dp red;
|
|
background: #bbb;
|
|
}
|
|
.bottom-right {
|
|
position: absolute;
|
|
display: inline;
|
|
height: 15dp;
|
|
right: 20dp;
|
|
}
|
|
</style>
|
|
</head>
|
|
|
|
<body>
|
|
<p>Try resizing the table using the document handle in the lower-right corner.</p>
|
|
<table>
|
|
<col span="2" style="min-width: 150dp; max-width: 250dp;"/>
|
|
<col/>
|
|
<col style="min-width: 50dp; max-width: 300dp;"/>
|
|
<tr>
|
|
<td rowspan="2" colspan="2">Hello</td>
|
|
<td>Whoop!</td>
|
|
<td>World Hi!</td>
|
|
</tr>
|
|
<tr>
|
|
<td colspan="2">World<br/>Hi!</td>
|
|
</tr>
|
|
<tr>
|
|
<td style="height: 50%;">Cat<div class="bottom-right">X</div></td>
|
|
<td style="padding-left: 30dp; padding-top: 50dp; position: relative" colspan="2">Mouse<div class="bottom-right">Y</div></td>
|
|
<td style="border-left: 5dp green; border-right-width: 2dp; vertical-align: bottom" rowspan="2">RatTTTTTTTTTTTTTTTTTTTTTTTTTTTTTTTTTTTTTTT</td>
|
|
</tr>
|
|
<tr>
|
|
<td style="vertical-align: bottom;">Row<br/>Row</td>
|
|
<td colspan="2">3</td>
|
|
</tr>
|
|
</table>
|
|
<p style="text-align: center;">Paragraph after table.</p>
|
|
<handle size_target="#document"/>
|
|
</body>
|
|
</rml>
|