如何在浏览器中确定列宽？ [英] How is column width determined in browser?
问题描述
如何确定表格中列的实际宽度？
下面的代码看起来像（在Chrome中）：
How is the actual width of columns in table determined? The code below looks (in Chrome) like this:
我的问题是添加任何更多的字符到单元格与ddd ...的可用空间不使用，其他单元格的内容被包装。有时问题是文本aaa ...和ccc ...不会重叠。表的总大小是固定的，但是所有内容都是动态的，因此固定的布局不是首选。
更新：尽管包含的文本少于任何实际的列第一行（c1-c4 ）对最终布局有相当显着的（可能的）影响。
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>
推荐答案
从 http://www.w3.org/TR/CSS21/tables.html
这不是被CSS3覆盖，但这部分规范是非规范的，所以可能是浏览器不完全符合（没有规范的定义这个行为afaik）。
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:
- 计算每个列的最小内容宽度单元格：格式化的
内容可以跨越任何数量的行，但不会溢出单元
框。如果单元的指定的width（W）大于MCW，则W
是最小单元格宽度。值auto表示MCW是
最小单元格宽度。
此外，计算每个单元格的最大单元格宽度：格式化
内容，而不打破除了显式换行符
之外的行。 - 对于每一列，从仅包含该列的
单元格中确定最大和最小列宽。最小值是具有最大最小单元格宽度（或列宽度，
，以较大者为准）的
单元格所需的最小值。最大值是单元格所需的最大最大单元格宽度（或列宽度，以较大的
为
）。 - 对于跨越多个列的每个单元格，请增加它所跨的列的最小
宽度，以使它们至少与
宽一样宽细胞。对最大宽度执行相同操作。如果可能，
将所有跨区列加宽大约相同的量。 - 对于宽度不是'auto'的每个列组元素，
增加它所跨的列的最小宽度，因此
至少与列组的width一样宽。
- 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.
字幕宽度最小值（CAPMIN）是通过计算
每个字幕的最小字幕外宽度作为
假设表单元格的MCW其中包含格式化为
display：block的字幕。最小字幕外部宽度的最大值是
CAPMIN。
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:
- 'table'或'inline-table'元素的'width'属性具有除'auto'之外的
计算值（W），所使用的宽度是
W，CAPMIN和最小值所有列所需的宽度加上单元格
的间距或边框（MIN）。如果使用的宽度大于MIN，则
额外宽度应分布在列上。 - 如果'table'或
'inline-table'element有'width：auto'，使用的宽度是表的包含块宽度，CAPMIN和MIN的
。
然而，如果CAPMIN或列
加上单元格间距或边框（MAX）所需的最大宽度小于包含
块的最大宽度，请使用max（MAX，CAPMIN）。
列宽的百分比值相对于表格宽度。
如果表具有width：auto，则百分比表示列宽度上的约束
，UA应尝试满足。 （显然，
这不总是可能的：如果列的宽度是'110％'，
约束不能满足。）
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.)
这篇关于如何在浏览器中确定列宽？的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！
