Menu
How is the actual width of columns in table determined? The code below looks (in Chrome) like this:
My problem is that adding any more characters to the cell with "ddd..." the free space is not used, but the content of other cells gets wrapped. Sometime the problem is that texts "aaa..." and "ccc..." would not overlap. The total size of the table is fixed, but all the content is dynamic, so a fixed layout is not preferred.
Update: Despite containing less text than any of the actual columns the first row (c1-c4) has quite significant (possitive) effect on the final layout.
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01//EN"> <html><head><meta http-equiv="Content-Type" content="text/html; charset=UTF-8"> <style type="text/css"> body {background:#000; color:#fff; font-family:'Tahoma'; font-weight:600; } .container {width:670px; } table {font-family:'Tahoma'; font-weight:600; border-color: #ffffff; border-width:1px; } .detail table{margin-left:20px; font-size:24px; width:650px;} .detail table .operational {text-align:right;} </style> </head> <body> <div class="detail"> <table border="1px" cellpadding="0px" cellspacing="0px" > <tbody> <!-- first row and borders only for debuging--> <tr> <td >c1</td> <td >c2</td> <td >c3</td> <td >c4</td> </tr> <tr > <td class="caption">Date</td> <td class="value">17.6.2013</td> <td class="operational" colspan="2">aaaaaaaaaaaaaaaaaaaaaaa</td> </tr> <tr > <td class="caption">bbbbbbbb</td> <td class="value" colspan="2">ccccccccccccccc ccc</td> <td class="operational">dddddddddddddd</td> </tr> <tr > <td class="caption">bbbbbb bbb</td> <td class="value" colspan="3">eeeeeeeeeeeeeeeeeeeeeeeeeeeee</td> </tr> <tr > <td class="caption">bbb bbbbbb</td> <td class="value" colspan="3">xxxxxxxxxxxxxxxxxx xxxxxxxxxxxxxxxxxxx</td> </tr> </tbody> </table> </div> </body></html> 
807
Table and column widths are set by the widths of table and col elements or by the width of the first row of cells. Cells in subsequent rows do not affect column widths.
Select the boundary of the column or row you want to move and drag it to the width or height you want. Select the rows or columns and then select Layout and choose your height and width. Select View > Ruler checkbox, select the cell you want, and then drag the markers on the ruler.
On the Page Layout or Layout tab, click Columns. At the bottom of the list, choose More Columns. In the Columns dialog box, adjust the settings under Width and spacing to choose your column width and the spacing between columns. If you want columns of varying widths, deselect the checkbox next to Equal column width.
From http://www.w3.org/TR/CSS21/tables.html
This was not overriden by CSS3 yet, but this part of spec is non-normative, so probably browsers does not comply to it exactly (there is no normative definition of this behavior afaik).
Column widths are determined as follows:
- Calculate the minimum content width (MCW) of each cell: the formatted content may span any number of lines but may not overflow the cell box. If the specified 'width' (W) of the cell is greater than MCW, W is the minimum cell width. A value of 'auto' means that MCW is the minimum cell width. Also, calculate the "maximum" cell width of each cell: formatting the content without breaking lines other than where explicit line breaks occur.
- For each column, determine a maximum and minimum column width from the cells that span only that column. The minimum is that required by the cell with the largest minimum cell width (or the column 'width', whichever is larger). The maximum is that required by the cell with the largest maximum cell width (or the column 'width', whichever is larger).
- For each cell that spans more than one column, increase the minimum widths of the columns it spans so that together, they are at least as wide as the cell. Do the same for the maximum widths. If possible, widen all spanned columns by approximately the same amount.
- For each column group element with a 'width' other than 'auto', increase the minimum widths of the columns it spans, so that together they are at least as wide as the column group's 'width'.
This gives a maximum and minimum width for each column.
The caption width minimum (CAPMIN) is determined by calculating for each caption the minimum caption outer width as the MCW of a hypothetical table cell that contains the caption formatted as "display: block". The greatest of the minimum caption outer widths is CAPMIN.
Column and caption widths influence the final table width as follows:
- If the 'table' or 'inline-table' element's 'width' property has a computed value (W) other than 'auto', the used width is the greater of W, CAPMIN, and the minimum width required by all the columns plus cell spacing or borders (MIN). If the used width is greater than MIN, the extra width should be distributed over the columns.
- If the 'table' or 'inline-table' element has 'width: auto', the used width is the greater of the table's containing block width, CAPMIN, and MIN. However, if either CAPMIN or the maximum width required by the columns plus cell spacing or borders (MAX) is less than that of the containing block, use max(MAX, CAPMIN).
A percentage value for a column width is relative to the table width. If the table has 'width: auto', a percentage represents a constraint on the column's width, which a UA should try to satisfy. (Obviously, this is not always possible: if the column's width is '110%', the constraint cannot be satisfied.)
175
If you love us? You can donate to us via Paypal or buy me a coffee so we can maintain and grow! Thank you!
Donate Us With
