85 lines
2.0 KiB
HTML
85 lines
2.0 KiB
HTML
<!DOCTYPE HTML>
|
|
<html>
|
|
<head>
|
|
<title>Balancing of tables (growing)</title>
|
|
<style type="text/css">
|
|
|
|
table, td {
|
|
border: none;
|
|
margin: 0;
|
|
padding: 0;
|
|
border-spacing: 3px;
|
|
}
|
|
|
|
tr { height: 1.5em; }
|
|
|
|
td { background: black; background: currentColor; }
|
|
|
|
td, span { line-height: 1; }
|
|
|
|
span {
|
|
display: inline-block;
|
|
width: 25px;
|
|
}
|
|
|
|
</style>
|
|
</head>
|
|
<body>
|
|
|
|
<!--
|
|
cell widths in the first table are:
|
|
min pref pct
|
|
25 75
|
|
25 25
|
|
0 0
|
|
25 50*
|
|
25 25 50%
|
|
|
|
and the table has 18px of horizontal border-spacing
|
|
|
|
pref width of columns is 300px
|
|
|
|
-->
|
|
|
|
<table><tr>
|
|
<td style="color:aqua"><span></span>​<span></span>​<span></span></td>
|
|
<td style="color:yellow"><span></span></td>
|
|
<td style="color:red"></td>
|
|
<td style="color:fuchsia" width="50"><span></span></td>
|
|
<td style="color:blue" width="50%"><span></span></td>
|
|
</tr></table>
|
|
|
|
<table width="518"><tr>
|
|
<td style="color:aqua"><span></span>​<span></span>​<span></span></td>
|
|
<td style="color:yellow"><span></span></td>
|
|
<td style="color:red"></td>
|
|
<td style="color:fuchsia" width="50"><span></span></td>
|
|
<td style="color:blue" width="50%"><span></span></td>
|
|
</tr></table>
|
|
|
|
<table width="438"><tr>
|
|
<td style="color:aqua" width="75"><span></span>​<span></span>​<span></span></td>
|
|
<td style="color:yellow" width="25"><span></span></td>
|
|
<td style="color:red"></td>
|
|
<td style="color:fuchsia" width="50"><span></span></td>
|
|
<td style="color:blue" width="50%"><span></span></td>
|
|
</tr></table>
|
|
|
|
<table width="418"><tr>
|
|
<td style="color:aqua" width="10%"><span></span></td>
|
|
<td style="color:yellow" width="10%"><span></span></td>
|
|
<td style="color:red"></td>
|
|
<td style="color:fuchsia" width="10%"><span></span></td>
|
|
<td style="color:blue" width="50%"><span></span></td>
|
|
</tr></table>
|
|
|
|
<table width="415"><tr>
|
|
<td style="color:aqua"></td>
|
|
<td style="color:yellow"></td>
|
|
<td style="color:fuchsia"></td>
|
|
<td style="color:blue"></td>
|
|
</tr></table>
|
|
|
|
</body>
|
|
</html>
|