<!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; } </style> </head> <body> <!-- width: 300px --><table><tr> <td style="color:aqua" width="75"> </td> <td style="color:yellow" width="25"> </td> <td style="color:red" width="0"></td> <td style="color:fuchsia" width="50"> </td> <td style="color:blue" width="150"> </td> </tr></table> <!-- width: 500px --><table><tr> <td style="color:aqua" width="150"> </td> <td style="color:yellow" width="50"> </td> <td style="color:red" width="0"></td> <td style="color:fuchsia" width="50"> </td> <td style="color:blue" width="250"> </td> </tr></table> <!-- width: 420px --><table><tr> <td style="color:aqua" width="105"> </td> <td style="color:yellow" width="35"> </td> <td style="color:red" width="0"></td> <td style="color:fuchsia" width="70"> </td> <td style="color:blue" width="210"> </td> </tr></table> <!-- width: 400px --><table><tr> <td style="color:aqua" width="50"> </td> <td style="color:yellow" width="50"> </td> <td style="color:red" width="0"></td> <td style="color:fuchsia" width="50"> </td> <td style="color:blue" width="250"> </td> </tr></table> <!-- width: 420px --><table><tr> <td style="color:aqua" width="75"> </td> <td style="color:yellow" width="85"> </td> <td style="color:fuchsia" width="50"> </td> <td style="color:blue" width="210"> </td> </tr></table> <!-- width: 400px --><table><tr> <td style="color:aqua" width="60"> </td> <td style="color:yellow" width="80"> </td> <td style="color:fuchsia" width="60"> </td> <td style="color:blue" width="200"> </td> </tr></table> <!-- width: 400px --><table><tr> <td style="color:aqua" width="100"> </td> <td style="color:yellow" width="100"> </td> <td style="color:fuchsia" width="100"> </td> <td style="color:blue" width="100"> </td> </tr></table> </body> </html>