Mixed Column Layouts with sized table

  


<!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: blue;
}
* .sized1 {
  width: 500px;
  background: gray;
}
* .sized2 {
  width: 200px;
  background: menu;
}
* .p1 {
  width: 20%;
  background: yellow;
}
* .p2 {
  width: 80%;
  background: red;
}
</style>
</head>
<body>

<table class="auto-layout sized">
    <tr>
        <td class="sized1">500px</td> 
        <td class="sized2">200px</td> 
        <td class="p2">80%</td> 
        <td class="p1">20%</td> 
        <td class="flex">auto</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.	Fixed Table with Flex Columns
11.	Auto-layout Table with Flex Columns
12.	stretched Table with Flex Columns
13.	Mixed Column Layouts with shrinkwrapped table
14.	Mixed Column Layouts and stretched table

Mixed Column Layouts with sized table : table layout « CSS « HTML / CSS

Related examples in the same category