22.12.2013 Views

W3C CSS2 Cascading Style Sheets, level 2 - instructional media + ...

W3C CSS2 Cascading Style Sheets, level 2 - instructional media + ...

W3C CSS2 Cascading Style Sheets, level 2 - instructional media + ...

SHOW MORE
SHOW LESS

Create successful ePaper yourself

Turn your PDF publications into a flip-book with our unique Google optimized e-Paper software.

larger). The maximum is that required by the cell with the largest maximum<br />

cell width (or the column ’width’, whichever is larger).<br />

3. For each cell that spans more than one column, increase the minimum<br />

widths of the columns it spans so that together, they are at least as wide as<br />

the cell. Do the same for the maximum widths. If possible, widen all spanned<br />

columns by approximately the same amount.<br />

This gives a maximum and minimum width for each column. Column widths<br />

influence the final table width as follows:<br />

1. If the ’table’ or ’inline-table’ element’s ’width’ property has a specified value<br />

(W) other than ’auto’, the property’s computed value is the greater of W and<br />

the minimum width required by all the columns plus cell spacing or borders<br />

(MIN). If W is greater than MIN, the extra width should be distributed over<br />

the columns.<br />

2. If the ’table’ or ’inline-table’ element has ’width: auto’, the computed table<br />

width is the greater of the table’s containing block width and MIN. However,<br />

if the maximum width required by the columns plus cell spacing or borders<br />

(MAX) is less than that of the containing block, use MAX.<br />

A percentage value for a column width is relative to the table width. If the table<br />

has ’width: auto’, a percentage represents a constraint on the column’s width,<br />

which a UA should try to satisfy. (Obviously, this is not always possible: if the<br />

column’s width is ’110%’, the constraint cannot be satisfied.)<br />

Note. In this algorithm, rows (and row groups) and columns (and column<br />

groups) both constrain and are constrained by the dimensions of the cells they<br />

contain. Setting the width of a column may indirectly influence the height of a<br />

row, and vice versa.<br />

17.5.3 Table height algorithms<br />

The height of a table is given by the ’height’ property for the ’table’ or ’inline-table’<br />

element. A value of ’auto’ means that the height is the sum of the row heights<br />

plus any cell spacing or borders. Any other value specifies the height explicitly;<br />

the table may thus be taller or shorter than the height of its rows. <strong>CSS2</strong> does not<br />

specify rendering when the specified table height differs from the content height,<br />

in particular whether content height should override specified height; if it doesn’t,<br />

how extra space should be distributed among rows that add up to less than the<br />

specified table height; or, if the content height exceeds the specified table height,<br />

whether the UA should provide a scrolling mechanism. Note. Future versions of<br />

CSS may specify this further.<br />

The height of a ’table-row’ element’s box is calculated once the user agent has<br />

all the cells in the row available: it is the maximum of the row’s specified ’height’<br />

and the minimum height (MIN) required by the cells. A ’height’ value of ’auto’ for<br />

a ’table-row’ means the computed row height is MIN. MIN depends on cell box<br />

heights and cell box alignment (much like the calculation of a line box [p. 141]<br />

height). <strong>CSS2</strong> does not define what percentage values of ’height’ refer to when<br />

specified for table rows and row groups.<br />

In <strong>CSS2</strong>, the height of a cell box is the maximum of the table cell’s ’height’<br />

property and the minimum height required by the content (MIN). A value of ’auto’<br />

for ’height’ implies a computed value of MIN. <strong>CSS2</strong> does not define what<br />

258

Hooray! Your file is uploaded and ready to be published.

Saved successfully!

Ooh no, something went wrong!