2007-05-03 16:11:00 -07:00
<!DOCTYPE html>
< html lang = "en-US" >
< head >
2007-11-15 10:10:31 -08:00
< title > -moz-max-content, -moz-min-content, -moz-fit-content, and -moz-available values of CSS width property, on table cells with table-layout: fixed< / title >
2007-05-03 16:11:00 -07:00
< meta http-equiv = "Content-Type" content = "text/html; charset=UTF-8" >
< meta http-equiv = "Content-Style-Type" content = "text/css" >
< style type = "text/css" >
body { font-size: 10px; line-height: 1; }
td table { table-layout: fixed; width: 200px; }
td td:first-child {
border-left: 1px solid;
padding-left: 2px;
padding-right: 4px;
border-right: 8px solid;
background: yellow;
}
< / style >
< / head >
< body >
< table border > < tr >
< td >
<!-- width -->
2007-11-15 10:10:31 -08:00
< table border > < tr > < td style = "width: -moz-max-content" > A B< / td > < td > < / td > < / tr > < / table >
< table border > < tr > < td style = "width: -moz-min-content" > A B< / td > < td > < / td > < / tr > < / table >
< table border > < tr > < td style = "width: -moz-fit-content" > A B< / td > < td > < / td > < / tr > < / table >
< table border > < tr > < td style = "width: -moz-available" > A B< / td > < td > < / td > < / tr > < / table >
2007-05-03 16:11:00 -07:00
< / td >
< td >
<!-- min - width -->
2007-11-15 10:10:31 -08:00
< table border > < tr > < td style = "min-width: -moz-max-content" > A B< / td > < td > < / td > < / tr > < / table >
< table border > < tr > < td style = "min-width: -moz-min-content" > A B< / td > < td > < / td > < / tr > < / table >
< table border > < tr > < td style = "min-width: -moz-fit-content" > A B< / td > < td > < / td > < / tr > < / table >
< table border > < tr > < td style = "min-width: -moz-available" > A B< / td > < td > < / td > < / tr > < / table >
2007-05-03 16:11:00 -07:00
2007-11-15 10:10:31 -08:00
< table border > < tr > < td style = "width: 1px; min-width: -moz-max-content" > A B< / td > < td > < / td > < / tr > < / table >
< table border > < tr > < td style = "width: 1px; min-width: -moz-min-content" > A B< / td > < td > < / td > < / tr > < / table >
< table border > < tr > < td style = "width: 1px; min-width: -moz-fit-content" > A B< / td > < td > < / td > < / tr > < / table >
< table border > < tr > < td style = "width: 1px; min-width: -moz-available" > A B< / td > < td > < / td > < / tr > < / table >
2007-05-03 16:11:00 -07:00
< / td >
< td >
<!-- max - width -->
2007-11-15 10:10:31 -08:00
< table border > < tr > < td style = "max-width: -moz-max-content" > A B< / td > < td > < / td > < / tr > < / table >
< table border > < tr > < td style = "max-width: -moz-min-content" > A B< / td > < td > < / td > < / tr > < / table >
< table border > < tr > < td style = "max-width: -moz-fit-content" > A B< / td > < td > < / td > < / tr > < / table >
< table border > < tr > < td style = "max-width: -moz-available" > A B< / td > < td > < / td > < / tr > < / table >
2007-05-03 16:11:00 -07:00
2007-11-15 10:10:31 -08:00
< table border > < tr > < td style = "width: 150px; max-width: -moz-max-content" > A B< / td > < td > < / td > < / tr > < / table >
< table border > < tr > < td style = "width: 150px; max-width: -moz-min-content" > A B< / td > < td > < / td > < / tr > < / table >
< table border > < tr > < td style = "width: 150px; max-width: -moz-fit-content" > A B< / td > < td > < / td > < / tr > < / table >
< table border > < tr > < td style = "width: 150px; max-width: -moz-available" > A B< / td > < td > < / td > < / tr > < / table >
2007-05-03 16:11:00 -07:00
< / td >
< / tr > < / table >
< / body >
< / html >