block-size-with-min-or-max-content-table-1-ref.html (1179B)
1 <!DOCTYPE html> 2 <html> 3 <head> 4 <title>CSS Reference Case: Block size with max-content and min-content in a table</title> 5 <meta charset="utf-8"> 6 <link rel="author" title="Boris Chiou" href="mailto:boris.chiou@gmail.com"> 7 <style> 8 html,body { 9 margin: 0; 10 } 11 table { 12 border: 2px solid black; 13 } 14 15 td { 16 border: 2px solid lime; 17 } 18 19 .item { 20 height: 50px; 21 width: 50px; 22 border: 1px solid blue; 23 } 24 25 .container { 26 writing-mode: vertical-lr; 27 } 28 29 .small { block-size: 1px; } 30 .big { block-size: 150px; } 31 </style> 32 </head> 33 <body> 34 <div class="container"> 35 <table class="big"><td><div class="item"></div></td></table> 36 <table class="big"><td><div class="item"></div></td></table> 37 38 <table><td class="small"><div class="item"></div></td></table> 39 <table><td class="small"><div class="item"></div></td></table> 40 </div> 41 42 <table class="big"><td><div class="item"></div></td></table> 43 <table class="big"><td><div class="item"></div></td></table> 44 45 <table><td class="small"><div class="item"></div></td></table> 46 <table><td class="small"><div class="item"></div></td></table> 47 </body> 48 </html>