width-special-values-cell-auto.html (4182B)
1 <!DOCTYPE html> 2 <html lang="en-US"> 3 <head> 4 <title>max-content, min-content, -moz-fit-content, and -moz-available values of CSS width property, on table cells with table-layout: auto</title> 5 <meta http-equiv="Content-Type" content="text/html; charset=UTF-8"> 6 <meta http-equiv="Content-Style-Type" content="text/css"> 7 <style type="text/css"> 8 9 body { font-size: 10px; line-height: 1; } 10 11 td td { 12 border-left: 1px solid; 13 padding-left: 2px; 14 padding-right: 4px; 15 border-right: 8px solid; 16 17 background: yellow; 18 } 19 20 </style> 21 </head> 22 <body> 23 24 <table border><tr> 25 <td> 26 <!-- width --> 27 <table border><tr><td style="width: max-content">A B</td></tr></table> 28 <table border width="1"><tr><td style="width: max-content">A B</td></tr></table> 29 <table border><tr><td style="width: min-content">A B</td></tr></table> 30 <table border width="1"><tr><td style="width: min-content">A B</td></tr></table> 31 <table border><tr><td style="width: -moz-fit-content">A B</td></tr></table> 32 <table border width="1"><tr><td style="width: -moz-fit-content">A B</td></tr></table> 33 <table border><tr><td style="width: -moz-available">A B</td></tr></table> 34 <table border width="1"><tr><td style="width: -moz-available">A B</td></tr></table> 35 36 </td> 37 <td> 38 <!-- min-width --> 39 40 <table border><tr><td style="min-width: max-content">A B</td></tr></table> 41 <table border width="1"><tr><td style="min-width: max-content">A B</td></tr></table> 42 <table border><tr><td style="min-width: min-content">A B</td></tr></table> 43 <table border width="1"><tr><td style="min-width: min-content">A B</td></tr></table> 44 <table border><tr><td style="min-width: -moz-fit-content">A B</td></tr></table> 45 <table border width="1"><tr><td style="min-width: -moz-fit-content">A B</td></tr></table> 46 <table border><tr><td style="min-width: -moz-available">A B</td></tr></table> 47 <table border width="1"><tr><td style="min-width: -moz-available">A B</td></tr></table> 48 49 <table border><tr><td style="width: 1px; min-width: max-content">A B</td></tr></table> 50 <table border width="1"><tr><td style="width: 1px; min-width: max-content">A B</td></tr></table> 51 <table border><tr><td style="width: 1px; min-width: min-content">A B</td></tr></table> 52 <table border width="1"><tr><td style="width: 1px; min-width: min-content">A B</td></tr></table> 53 <table border><tr><td style="width: 1px; min-width: -moz-fit-content">A B</td></tr></table> 54 <table border width="1"><tr><td style="width: 1px; min-width: -moz-fit-content">A B</td></tr></table> 55 <table border><tr><td style="width: 1px; min-width: -moz-available">A B</td></tr></table> 56 <table border width="1"><tr><td style="width: 1px; min-width: -moz-available">A B</td></tr></table> 57 58 </td> 59 <td> 60 <!-- max-width --> 61 62 <table border><tr><td style="max-width: max-content">A B</td></tr></table> 63 <table border width="1"><tr><td style="max-width: max-content">A B</td></tr></table> 64 <table border><tr><td style="max-width: min-content">A B</td></tr></table> 65 <table border width="1"><tr><td style="max-width: min-content">A B</td></tr></table> 66 <table border><tr><td style="max-width: -moz-fit-content">A B</td></tr></table> 67 <table border width="1"><tr><td style="max-width: -moz-fit-content">A B</td></tr></table> 68 <table border><tr><td style="max-width: -moz-available">A B</td></tr></table> 69 <table border width="1"><tr><td style="max-width: -moz-available">A B</td></tr></table> 70 71 <table border><tr><td style="width: 150px; max-width: max-content">A B</td></tr></table> 72 <table border width="1"><tr><td style="width: 150px; max-width: max-content">A B</td></tr></table> 73 <table border><tr><td style="width: 150px; max-width: min-content">A B</td></tr></table> 74 <table border width="1"><tr><td style="width: 150px; max-width: min-content">A B</td></tr></table> 75 <table border><tr><td style="width: 150px; max-width: -moz-fit-content">A B</td></tr></table> 76 <table border width="1"><tr><td style="width: 150px; max-width: -moz-fit-content">A B</td></tr></table> 77 <table border><tr><td style="width: 150px; max-width: -moz-available">A B</td></tr></table> 78 <table border width="1"><tr><td style="width: 150px; max-width: -moz-available">A B</td></tr></table> 79 80 81 </td> 82 </tr></table> 83 84 85 </body> 86 </html>