tor-browser

The Tor Browser
git clone https://git.dasho.dev/tor-browser.git
Log | Files | Refs | README | LICENSE

balancing-1-ref.html (2600B)

      1 <!DOCTYPE HTML>
      2 <html>
      3 <head>
      4 <title>Balancing of tables (shrinking)</title>
      5 <style type="text/css">
      6 
      7 table, td {
      8  border: none;
      9  margin: 0;
     10  padding: 0;
     11  border-spacing: 3px;
     12 }
     13 
     14 tr { height: 4em; }
     15 
     16 td { background: black; background: currentColor; }
     17 
     18 body { width: 900px; }
     19 
     20 </style>
     21 </head>
     22 <body>
     23 
     24 <!--
     25    cell widths are:
     26    min   pref   pct
     27     50    150
     28     50     50
     29     50    100*
     30     50     50   50%
     31 
     32    and the table has 15px of horizontal border-spacing
     33 
     34    sizing to       col width total
     35    min             200
     36    min/pct         300
     37    min/spec        400
     38    pref            600
     39 
     40  -->
     41 
     42 <!-- width: 200px --><table><tr>
     43 <td style="color:aqua"    width="50">&nbsp;</td>
     44 <td style="color:yellow"  width="50">&nbsp;</td>
     45 <td style="color:fuchsia" width="50">&nbsp;</td>
     46 <td style="color:blue"    width="50">&nbsp;</td>
     47 </tr></table>
     48 
     49 <!-- width: 250px --><table><tr>
     50 <td style="color:aqua"    width="50">&nbsp;</td>
     51 <td style="color:yellow"  width="50">&nbsp;</td>
     52 <td style="color:fuchsia" width="50">&nbsp;</td>
     53 <td style="color:blue"    width="100">&nbsp;</td>
     54 </tr></table>
     55 
     56 <!-- width: 300px --><table><tr>
     57 <td style="color:aqua"    width="50">&nbsp;</td>
     58 <td style="color:yellow"  width="50">&nbsp;</td>
     59 <td style="color:fuchsia" width="50">&nbsp;</td>
     60 <td style="color:blue"    width="150">&nbsp;</td>
     61 </tr></table>
     62 
     63 <!-- width: 350px --><table><tr>
     64 <td style="color:aqua"    width="50">&nbsp;</td>
     65 <td style="color:yellow"  width="50">&nbsp;</td>
     66 <td style="color:fuchsia" width="75">&nbsp;</td>
     67 <td style="color:blue"    width="175">&nbsp;</td>
     68 </tr></table>
     69 
     70 <!-- width: 400px --><table><tr>
     71 <td style="color:aqua"    width="50">&nbsp;</td>
     72 <td style="color:yellow"  width="50">&nbsp;</td>
     73 <td style="color:fuchsia" width="100">&nbsp;</td>
     74 <td style="color:blue"    width="200">&nbsp;</td>
     75 </tr></table>
     76 
     77 <!-- width: 500px --><table><tr>
     78 <td style="color:aqua"    width="100">&nbsp;</td>
     79 <td style="color:yellow"  width="50">&nbsp;</td>
     80 <td style="color:fuchsia" width="100">&nbsp;</td>
     81 <td style="color:blue"    width="250">&nbsp;</td>
     82 </tr></table>
     83 
     84 <!-- width: 600px --><table><tr>
     85 <td style="color:aqua"    width="150">&nbsp;</td>
     86 <td style="color:yellow"  width="50">&nbsp;</td>
     87 <td style="color:fuchsia" width="100">&nbsp;</td>
     88 <td style="color:blue"    width="300">&nbsp;</td>
     89 </tr></table>
     90 
     91 <!-- width: 800px --><table><tr>
     92 <td style="color:aqua"    width="225">&nbsp;</td>
     93 <td style="color:yellow"  width="75">&nbsp;</td>
     94 <td style="color:fuchsia" width="100">&nbsp;</td>
     95 <td style="color:blue"    width="400">&nbsp;</td>
     96 </tr></table>
     97 
     98 </body>
     99 </html>