mirror of
https://github.com/GabsPuNs/Project-Zenith-Main.git
synced 2026-07-17 01:00:49 +00:00
136 lines
2.3 KiB
Plaintext
136 lines
2.3 KiB
Plaintext
<rml>
|
|
<head>
|
|
<title>Table 02</title>
|
|
<link type="text/rcss" href="../style.rcss"/>
|
|
<link rel="help" href="https://www.w3.org/TR/2011/REC-CSS2-20110607/tables.html#fixed-table-layout" />
|
|
<meta name="Description" content="Test table column sizing algorithm." />
|
|
<style>
|
|
table {
|
|
margin: 2em 0;
|
|
border: 2dp #666;
|
|
gap: 5dp;
|
|
text-align: center;
|
|
}
|
|
td {
|
|
background: #bbb;
|
|
vertical-align: middle;
|
|
padding: 5dp;
|
|
}
|
|
.color {
|
|
background: #333;
|
|
padding: 5dp;
|
|
width: 0;
|
|
}
|
|
.color colgroup {
|
|
padding: 0 5dp;
|
|
margin: 0 5dp;
|
|
background: #a33;
|
|
border: 5dp #f33;
|
|
}
|
|
.color col {
|
|
width: 80dp;
|
|
padding: 0 5dp;
|
|
margin: 0 5dp;
|
|
background: #33b;
|
|
border: 5dp #66f;
|
|
}
|
|
.color tr {
|
|
height: auto;
|
|
}
|
|
.color td {
|
|
margin: 0 5dp;
|
|
padding: 0 5dp;
|
|
background: #bbb;
|
|
border: 5dp #ddd;
|
|
height: 30dp;
|
|
}
|
|
.color-ref {
|
|
border: 2dp #666;
|
|
background: #333;
|
|
margin: 20dp 0;
|
|
height: 40dp;
|
|
width: 305dp; /* 2*col width + 8*td margin + 4*col margin + 4*colgroup padding + 4*colgroup border +
|
|
4*colgroup margin + 3*column-gap + 2*table padding */
|
|
}
|
|
</style>
|
|
</head>
|
|
|
|
<body>
|
|
<p>The following tables should be the same size.</p>
|
|
<table>
|
|
<tr>
|
|
<td style="width: 50dp">A</td>
|
|
<td>B</td>
|
|
<td>C</td>
|
|
<td>D</td>
|
|
<td style="width: 50dp">E</td>
|
|
</tr>
|
|
</table>
|
|
<table>
|
|
<col style="width: 50dp"/>
|
|
<colgroup span="3"/>
|
|
<col style="width: 50dp"/>
|
|
<tr>
|
|
<td>A</td>
|
|
<td>B</td>
|
|
<td>C</td>
|
|
<td>D</td>
|
|
<td>E</td>
|
|
</tr>
|
|
</table>
|
|
<table>
|
|
<colgroup>
|
|
<col style="width: 50dp"/>
|
|
</colgroup>
|
|
<col span="3"/>
|
|
<colgroup>
|
|
<col style="width: 50dp"/>
|
|
</colgroup>
|
|
<tr>
|
|
<td>A</td>
|
|
<td>B</td>
|
|
<td>C</td>
|
|
<td>D</td>
|
|
<td>E</td>
|
|
</tr>
|
|
</table>
|
|
<table>
|
|
<colgroup>
|
|
<col style="min-width: 50dp; max-width: 50dp"/>
|
|
<col/>
|
|
<col/>
|
|
<col/>
|
|
<col style="width: 50dp"/>
|
|
</colgroup>
|
|
<tr>
|
|
<td>A</td>
|
|
<td>B</td>
|
|
<td>C</td>
|
|
<td>D</td>
|
|
<td>E</td>
|
|
</tr>
|
|
</table>
|
|
|
|
<hr/>
|
|
|
|
The following table should be symmetrical and have the same size as the reference box beneath.
|
|
<table class="color">
|
|
<colgroup>
|
|
<col span="2"/>
|
|
</colgroup>
|
|
<colgroup>
|
|
<col span="2"/>
|
|
</colgroup>
|
|
<tr>
|
|
<td>A</td>
|
|
<td>B</td>
|
|
<td>C</td>
|
|
<td>D</td>
|
|
</tr>
|
|
</table>
|
|
<div class="color-ref"/>
|
|
|
|
<handle size_target="#document"/>
|
|
</body>
|
|
</rml>
|