Auto-layout Table with Flex Columns : table layout « CSS « HTML / CSS






  1. HTML / CSS
  2. CSS
  3. table layout

Auto-layout Table with Flex Columns

  
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
    "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
    <meta http-equiv="content-type" content="text/html; charset=utf-8" />
    <title></title>
<style type="text/css" media="Screen">
* .auto-layout {
  table-layout: auto;
}


* .sized {
  width: 700px;
}

* .flex {
  width: auto;
  background: gray;
}

* .sized1 {
  width: 200px;
  background: menu;
}

* .sized2 {
  width: 100px;
  background: gold;
}

* .sized3 {
  width: 500px;
  background:pink;
}

* .p1 {
  width: 20%;
  background: red;
}
</style>
</head>
<body>



<table class="auto-layout sized">
    <tr><td class="sized1">200px</td><td class="p1">20%</td><td class="sized2">100px</td> 
        <td class="flex">auto flex</td> <td class="flex">auto flex</td>
    </tr>
</table> 



</body>
</html>








Related examples in the same category

1.'table-layout' Example
2.table-layout: auto
3.table-layout: fixed and width 100%
4.table-layout: fixed
5.table-layout: fixed and width setting
6.table-layout: default and width setting
7.Liquid Design in a Table
8.Single Column Design with Table
9.Mixed Column Layouts and Fixed Table
10.Mixed Column Layouts with sized table
11.Fixed Table with Flex Columns
12.stretched Table with Flex Columns
13.Mixed Column Layouts with shrinkwrapped table
14.Mixed Column Layouts and stretched table