<!DOCTYPE HTML> <html> <head> <title>Balancing of tables (shrinking)</title> <style type="text/css"> table, td { border: none; margin: 0; padding: 0; border-spacing: 3px; } tr { height: 4em; } td { background: black; background: currentColor; } td, span { line-height: 1; } span { display: inline-block; width: 50px; } body { width: 900px; } </style> </head> <body> <!-- cell widths are: min pref pct 50 150 50 50 50 100* 50 50 50% and the table has 15px of horizontal border-spacing sizing to col width total min 200 min/pct 300 min/spec 400 pref 600 --> <div style="width: 100px"><table><tr> <td style="color:aqua"><span></span>​<span></span>​<span></span></td> <td style="color:yellow"><span></span></td> <td style="color:fuchsia" width="100"><span></span></td> <td style="color:blue" width="50%"><span></span></td> </tr></table></div> <div style="width: 265px"><table><tr> <td style="color:aqua"><span></span>​<span></span>​<span></span></td> <td style="color:yellow"><span></span></td> <td style="color:fuchsia" width="100"><span></span></td> <td style="color:blue" width="50%"><span></span></td> </tr></table></div> <div style="width: 315px"><table><tr> <td style="color:aqua"><span></span>​<span></span>​<span></span></td> <td style="color:yellow"><span></span></td> <td style="color:fuchsia" width="100"><span></span></td> <td style="color:blue" width="50%"><span></span></td> </tr></table></div> <div style="width: 365px"><table><tr> <td style="color:aqua"><span></span>​<span></span>​<span></span></td> <td style="color:yellow"><span></span></td> <td style="color:fuchsia" width="100"><span></span></td> <td style="color:blue" width="50%"><span></span></td> </tr></table></div> <div style="width: 415px"><table><tr> <td style="color:aqua"><span></span>​<span></span>​<span></span></td> <td style="color:yellow"><span></span></td> <td style="color:fuchsia" width="100"><span></span></td> <td style="color:blue" width="50%"><span></span></td> </tr></table></div> <div style="width: 515px"><table><tr> <td style="color:aqua"><span></span>​<span></span>​<span></span></td> <td style="color:yellow"><span></span></td> <td style="color:fuchsia" width="100"><span></span></td> <td style="color:blue" width="50%"><span></span></td> </tr></table></div> <div style="width: 700px"><table><tr> <td style="color:aqua"><span></span>​<span></span>​<span></span></td> <td style="color:yellow"><span></span></td> <td style="color:fuchsia" width="100"><span></span></td> <td style="color:blue" width="50%"><span></span></td> </tr></table></div> <table width="815"><tr> <td style="color:aqua"><span></span>​<span></span>​<span></span></td> <td style="color:yellow"><span></span></td> <td style="color:fuchsia" width="100"><span></span></td> <td style="color:blue" width="50%"><span></span></td> </tr></table> </body> </html>