Hi List,
Assume we have a table with these basic properties:
table {
border-collapse: collapse;
border: 1px solid #859EB5;
border-spacing: 0;
font-family: tahoma;
}
td {
border: 1px solid #859EB5;
font-size: 11px; text-align: right;
padding-top: 1px; padding-bottom: 1px;
padding-right: 0px; padding-left: 0px;
}
Note the last line: horizontal padding is set to 0. Assume further the
table has 8 columns which should have an alternating width of 60px and
90px respectively. We do this by assigning a class to the col:
<colgroup>
<col class="num1">
<col class="cur1">
<col class="num1">
<col class="cur1">
<col class="num1">
<col class="cur1">
<col class="num1">
<col class="cur1">
</colgroup>
and then define the column width with css:
table col { width: 90px; } /* take this as a default */
table col.num1 { width: 60px; }
table col.cur1 { width: 90px; color: black; background-color: #ffc;}
To take advantage of the fixed table layout we specify
table {
table-layout: fixed;
width: 609px; /* (60+90)*8 for col-width + (8+1) for borders */
}
The result is shown in Tab. 1 (http://test.rudolphina.org/col-width.html). The
display is the same for Firefox 2.0.0.13, Opera 9.25, IE 6 and IE 7.
But this changes if we specify a padding (Tab. 2) for the cells like
td { padding-right: 4px; padding-left: 0px; }
as IE 6 and IE 7 enlarge each column by 4px (in the absence of a colspan).
To get IE 6 and IE 7 to display the same as Firefox and Opera again (Tab. 3)
it is necessary to overwrite the specified col width by
table#t3 col { width: 86px; }
table#t3 col.num1 { width: 56px; }
table#t3 col.cur1 { width: 86px; }
Note: Other tests seem to indicate that this might not sufficient in cases
where colspans are present.
Questions:
1. Is IE 6, IE 7 in accordance with the specification?
2. How does it look in Safari, Firefox 3 and IE 8 ?
Regards,
Manfred
References:
http://www.w3.org/TR/CSS21/tables.html#columns
17.3 Columns
Table cells may belong to two contexts: rows and columns. However, in
the source document cells are descendants of rows, never of columns.
Nevertheless, some aspects of cells can be influenced by setting
properties on columns.
'width'
The 'width' property gives the minimum width for the column.
http://www.w3.org/TR/CSS21/tables.html#fixed-table-layout
17.5.2.1 Fixed table layout
With this (fast) algorithm, the horizontal layout of the table does
not depend on the contents of the cells; it only depends on the
table's width, the width of the columns, and borders or cell spacing.
In the fixed table layout algorithm, the width of each column is
determined as follows:
1. A column element with a value other than 'auto' for the 'width'
property sets the width for that column.
2. Otherwise, a cell in the first row with a value other than
'auto' for the 'width' property determines the width for that column.
If the cell spans more than one column, the width is divided over the
columns.
3. Any remaining columns equally divide the remaining horizontal
table space (minus borders or cell spacing).
The width of the table is then the greater of the value of the 'width'
property for the table element and the sum of the column widths (plus
cell spacing or borders). If the table is wider than the columns, the
extra space should be distributed over the columns.
______________________________________________________________________
css-discuss [EMAIL PROTECTED]
http://www.css-discuss.org/mailman/listinfo/css-d
List wiki/FAQ -- http://css-discuss.incutio.com/
List policies -- http://css-discuss.org/policies.html
Supported by evolt.org -- http://www.evolt.org/help_support_evolt/
