Ditto everything that Ralph posted, especially a working example of your concept with behavioral preferences and/or absolutes! The overall context is important.
I chose to title the demo “old school” precisely to stimulate discussion <smile>.
I chose 20% because of your example and for convenience.
The rule is that the percentage width of all table-cells in a row cannot exceed 100%. Less than 100% is fine. The percent value does matter, but can be considered a nuance for the time being.
You can assign different percentage widths to the cells to change their relative widths (ratio) within the row. (see new demo)
Tables are blocks that shrink-wrap by default (full blocks, not inline and not floating).
Table-cells are containers that shrink to fit their content OR [uniformly] expand to fit the table container, if it has been given a width, by default.
Together, these two properties possess unique behaviors.
Actual table construction requires a selector with the table-row property, not just selectors with table and table-cell properties, and all cells in the same column have the same width (thus, the “table”); however, the table-row property is not necessary in most single row applications of these styles.
I see from the discussion that you are looking for a page layout mechanism. I don’t think you would be happy with table properties as a page layout scheme in the long run.
To answer your question about widths, the following example applies different widths to the table-cells within 100% width rows.
<!DOCTYPE html>
<html>
<!--
About cell widths:
The percentage widths of table-cells cannot exceed 100% in a row.
eg: in the first row, any width value represents 100% of the available width.
in the second row, 20% & 30% will set the width of the first cell to 40/100 of the full width and the width of the second cell to 60/100 of the full width of the row.
in the third row, 20:30:10 represents widths of 2/6 + 3/6 + 1/6 of 100%.
in the fourth row, 20:30:10:40 assigns widths of 2/10 + 3/10 + 1/10 + 4/10 of the table to the respective cells.
In practice, I would not likely assign the same width to all cells (as I did in the previous demo).
Instead, I would use classes (cell1,cell2,cell3) or adjacent sib selectors because the different cells are likey to contain other unique styles.
Please don't confuse the simplicity of the demo with required styles.
-->
<head>
<title>css table/table-cells</title>
<meta http-equiv="content-type" content="text/html; charset=ISO-8859-1">
<meta http-equiv="content-language" content="en-us">
<style type="text/css">
html,body {
width:100%;
}
.row {
display:table;
width:100%;
border-spacing:12px 6px;
margin:0px auto;
}
.row div {
display:table-cell;
width:20%;
height:30px;
border:1px solid #080;
background-color:#cfc;
}
.row div + div {width:30%}
.row div + div + div {width:10%}
.row div + div + div + div {width:40%}
</style>
</head>
<body>
<div class="row">
<div></div>
</div>
<div class="row">
<div></div>
<div></div>
</div>
<div class="row">
<div></div>
<div></div>
<div></div>
</div>
<div class="row">
<div></div>
<div></div>
<div></div>
<div></div>
</div>
</body>
</html>