tor-browser

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

balancing-1.html (3078B)

      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 td, span { line-height: 1; }
     19 
     20 span {
     21  display: inline-block;
     22  width: 50px;
     23 }
     24 
     25 body { width: 900px; }
     26 
     27 </style>
     28 </head>
     29 <body>
     30 
     31 <!--
     32    cell widths are:
     33    min   pref   pct
     34     50    150
     35     50     50
     36     50    100*
     37     50     50   50%
     38 
     39    and the table has 15px of horizontal border-spacing
     40 
     41    sizing to       col width total
     42    min             200
     43    min/pct         300
     44    min/spec        400
     45    pref            600
     46 
     47  -->
     48 
     49 <div style="width: 100px"><table><tr>
     50 <td style="color:aqua"><span></span>&#x200b;<span></span>&#x200b;<span></span></td>
     51 <td style="color:yellow"><span></span></td>
     52 <td style="color:fuchsia" width="100"><span></span></td>
     53 <td style="color:blue" width="50%"><span></span></td>
     54 </tr></table></div>
     55 
     56 <div style="width: 265px"><table><tr>
     57 <td style="color:aqua"><span></span>&#x200b;<span></span>&#x200b;<span></span></td>
     58 <td style="color:yellow"><span></span></td>
     59 <td style="color:fuchsia" width="100"><span></span></td>
     60 <td style="color:blue" width="50%"><span></span></td>
     61 </tr></table></div>
     62 
     63 <div style="width: 315px"><table><tr>
     64 <td style="color:aqua"><span></span>&#x200b;<span></span>&#x200b;<span></span></td>
     65 <td style="color:yellow"><span></span></td>
     66 <td style="color:fuchsia" width="100"><span></span></td>
     67 <td style="color:blue" width="50%"><span></span></td>
     68 </tr></table></div>
     69 
     70 <div style="width: 365px"><table><tr>
     71 <td style="color:aqua"><span></span>&#x200b;<span></span>&#x200b;<span></span></td>
     72 <td style="color:yellow"><span></span></td>
     73 <td style="color:fuchsia" width="100"><span></span></td>
     74 <td style="color:blue" width="50%"><span></span></td>
     75 </tr></table></div>
     76 
     77 <div style="width: 415px"><table><tr>
     78 <td style="color:aqua"><span></span>&#x200b;<span></span>&#x200b;<span></span></td>
     79 <td style="color:yellow"><span></span></td>
     80 <td style="color:fuchsia" width="100"><span></span></td>
     81 <td style="color:blue" width="50%"><span></span></td>
     82 </tr></table></div>
     83 
     84 <div style="width: 515px"><table><tr>
     85 <td style="color:aqua"><span></span>&#x200b;<span></span>&#x200b;<span></span></td>
     86 <td style="color:yellow"><span></span></td>
     87 <td style="color:fuchsia" width="100"><span></span></td>
     88 <td style="color:blue" width="50%"><span></span></td>
     89 </tr></table></div>
     90 
     91 <div style="width: 700px"><table><tr>
     92 <td style="color:aqua"><span></span>&#x200b;<span></span>&#x200b;<span></span></td>
     93 <td style="color:yellow"><span></span></td>
     94 <td style="color:fuchsia" width="100"><span></span></td>
     95 <td style="color:blue" width="50%"><span></span></td>
     96 </tr></table></div>
     97 
     98 <table width="815"><tr>
     99 <td style="color:aqua"><span></span>&#x200b;<span></span>&#x200b;<span></span></td>
    100 <td style="color:yellow"><span></span></td>
    101 <td style="color:fuchsia" width="100"><span></span></td>
    102 <td style="color:blue" width="50%"><span></span></td>
    103 </tr></table>
    104 
    105 </body>
    106 </html>