min-max-size-table-content-box.html (1298B)
1 <!doctype html> 2 <title>min/max-{width,height} on tables with box-sizing: content-box</title> 3 <meta charset="utf-8"> 4 <link rel="help" href="https://bugzilla.mozilla.org/show_bug.cgi?id=1651530"> 5 <link rel="help" href="https://drafts.csswg.org/css-tables/#computing-the-table-height"> 6 <link rel="help" href="https://github.com/w3c/csswg-drafts/issues/5336"> 7 <link rel="author" href="mailto:mats@mozilla.com" title="Mats Palmgren"> 8 <link rel="author" href="https://mozilla.org" title="Mozilla"> 9 <link rel="match" href="min-max-size-table-content-box-ref.html"> 10 <style> 11 html, 12 body { 13 color: black; 14 background-color: white; 15 font: 16px/1 monospace; 16 padding: 0; 17 margin: 0; 18 } 19 20 table { 21 box-sizing: content-box; 22 border: 3px solid black; 23 padding: 5px; 24 background: blue content-box; 25 border-spacing: 0; 26 } 27 28 td { 29 padding: 1px; 30 } 31 32 div { 33 width: 75px; 34 height: 75px; 35 } 36 37 .grid { 38 display: grid; 39 } 40 </style> 41 <table><td></td></table> 42 <table style="min-height:50px"><td></td></table> 43 <table style="min-width:50px"><td></td></table> 44 <table style="max-height:50px"><td><div></div></td></table> 45 <table style="max-width:50px"><td><div></div></td></table> 46 <div class="grid"><table style="max-height:50px"><td></td></table></div> 47 <div class="grid"><table style="max-width:50px"><td></td></table></div>