<!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; } 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 --> <!-- width: 200px --><table><tr> <td style="color:aqua" width="50"> </td> <td style="color:yellow" width="50"> </td> <td style="color:fuchsia" width="50"> </td> <td style="color:blue" width="50"> </td> </tr></table> <!-- width: 250px --><table><tr> <td style="color:aqua" width="50"> </td> <td style="color:yellow" width="50"> </td> <td style="color:fuchsia" width="50"> </td> <td style="color:blue" width="100"> </td> </tr></table> <!-- width: 300px --><table><tr> <td style="color:aqua" width="50"> </td> <td style="color:yellow" width="50"> </td> <td style="color:fuchsia" width="50"> </td> <td style="color:blue" width="150"> </td> </tr></table> <!-- width: 350px --><table><tr> <td style="color:aqua" width="50"> </td> <td style="color:yellow" width="50"> </td> <td style="color:fuchsia" width="75"> </td> <td style="color:blue" width="175"> </td> </tr></table> <!-- width: 400px --><table><tr> <td style="color:aqua" width="50"> </td> <td style="color:yellow" width="50"> </td> <td style="color:fuchsia" width="100"> </td> <td style="color:blue" width="200"> </td> </tr></table> <!-- width: 500px --><table><tr> <td style="color:aqua" width="100"> </td> <td style="color:yellow" width="50"> </td> <td style="color:fuchsia" width="100"> </td> <td style="color:blue" width="250"> </td> </tr></table> <!-- width: 600px --><table><tr> <td style="color:aqua" width="150"> </td> <td style="color:yellow" width="50"> </td> <td style="color:fuchsia" width="100"> </td> <td style="color:blue" width="300"> </td> </tr></table> <!-- width: 800px --><table><tr> <td style="color:aqua" width="225"> </td> <td style="color:yellow" width="75"> </td> <td style="color:fuchsia" width="100"> </td> <td style="color:blue" width="400"> </td> </tr></table> </body> </html>