cpp
/
RmlUi
mirror of https://github.com/mikke89/RmlUi.git


			
				
					
						
						
							123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135
							<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>