如何在浏览器中确定列宽？
Luk*_*kas 20 html css html-table
如何确定表中列的实际宽度？下面的代码(在Chrome中)看起来像这样:
我的问题是用"ddd ..."向单元格添加更多字符,不使用自由空间,但其他单元格的内容被包装.有时问题是文本"aaa ..."和"ccc ..."不会重叠.表的总大小是固定的,但所有内容都是动态的,因此不优选固定布局.
更新:尽管包含的文本少于任何实际列,但第一行(c1-c4)对最终布局具有非常显着(可能)的影响.
<!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>
sam*_*uil 24
来自http://www.w3.org/TR/CSS21/tables.html
这还没有被CSS3覆盖,但这部分规范是非规范性的,所以浏览器可能并不完全符合它(这种行为没有规范性的定义).
列宽确定如下:
- 计算每个单元格的最小内容宽度(MCW):格式化的内容可能跨越任意数量的行但可能不会溢出单元格框.如果单元格的指定"宽度"(W)大于MCW,则W是最小单元格宽度.值"auto"表示MCW是最小单元格宽度.此外,计算每个单元格的"最大"单元格宽度:格式化内容而不破坏除显式换行符之外的行.
- 对于每列,从仅跨越该列的单元格确定最大和最小列宽.最小值是具有最大单元格宽度(或"宽度"列,以较大者为准)的单元格所需的最小值.最大值是具有最大单元格宽度(或"宽度"列,以较大者为准)的单元格所需的最大值.
- 对于跨越多个列的每个单元格,增加它跨越的列的最小宽度,以便它们一起至少与单元格一样宽.对最大宽度执行相同操作.如果可能,将所有跨越的列加宽大约相同的量.
- 对于"宽度"不是"自动"的每个列组元素,增加其跨越的列的最小宽度,以便它们一起至少与列组的"宽度"一样宽.
这为每列提供了最大和最小宽度.
字幕宽度最小值(CAPMIN)是通过计算每个字幕的最小字幕外部宽度来确定的,该最小字幕外部宽度是包含格式为"display:block"的字幕的假设表格单元格的MCW.最小字幕外部宽度的最大值是CAPMIN.
列和标题宽度会影响最终的表格宽度,如下所示:
- 如果'table'或'inline-table'元素的'width'属性具有除'auto'之外的计算值(W),则使用的宽度是W,CAPMIN和所有列所需的最小宽度加上的较大值单元格间距或边框(MIN).如果使用的宽度大于MIN,则额外宽度应分布在列上.
- 如果'table'或'inline-table'元素具有'width:auto',则使用的宽度是包含块宽度,CAPMIN和MIN的表中的较大者.但是,如果CAPMIN或列所需的最大宽度加上单元格间距或边框(MAX)小于包含块的最大宽度,请使用max(MAX,CAPMIN).
列宽的百分比值是相对于表宽度的.如果表具有'width:auto',则百分比表示对列宽度的约束,UA应该尝试满足该约束.(显然,这并不总是可行的:如果列的宽度为'110%',则无法满足约束.)