860242-1.html (1107B)
1 <!DOCTYPE html> 2 <html> 3 <head> 4 <meta charset="utf-8"> 5 <style> 6 .table { 7 display: table; 8 width: 100px; 9 table-layout: fixed; 10 margin-bottom: 2px; 11 } 12 13 .table > * { 14 box-sizing: border-box; 15 display: table-cell; 16 height: 30px; 17 } 18 19 .withPadding { padding: 10px; } 20 .withBorder { border: 2px solid black; } 21 22 .thin { width: 25%; } 23 .wide { width: 75%; } 24 25 .teal { background: teal; } 26 .purple { background: purple; } 27 </style> 28 </head> 29 <body> 30 <div class="table"> 31 <div class="thin teal"></div> 32 <div class="wide purple"></div> 33 </div> 34 <div class="table"> 35 <div class="thin withPadding teal"></div> 36 <div class="wide withPadding purple"></div> 37 </div> 38 <div class="table"> 39 <div class="thin withBorder teal"></div> 40 <div class="wide withBorder purple"></div> 41 </div> 42 <div class="table"> 43 <div class="thin withBorder withPadding teal"></div> 44 <div class="wide withBorder withPadding purple"></div> 45 </div> 46 </body> 47 </html>