25

表格中列的实际宽度是如何确定的？下面的代码（在 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>
4

1 回答 1

32

来自http://www.w3.org/TR/CSS21/tables.html

这还没有被 CSS3 覆盖，但是规范的这一部分是非规范的，所以浏览器可能不完全符合它（这种行为没有规范的定义 afaik）。

列宽确定如下：

  1. 计算每个单元格的最小内容宽度（MCW）：格式化的内容可以跨越任意数量的行，但不能溢出单元格框。如果单元格的指定“宽度”(W) 大于 MCW，则 W 是最小单元格宽度。'auto' 值意味着 MCW 是最小单元格宽度。此外，计算每个单元格的“最大”单元格宽度：格式化内容而不换行，除非出现明确的换行符。
  2. 对于每一列，从仅跨越该列的单元格中确定最大和最小列宽。最小值是具有最大最小单元格宽度（或列“宽度”，以较大者为准）的单元格所需的最小值。最大值是具有最大单元格宽度（或列“宽度”，以较大者为准）的单元格所需的最大值。
  3. 对于跨越多于一列的每个单元格，增加它跨越的列的最小宽度，以便它们加在一起至少与单元格一样宽。对最大宽度执行相同操作。如果可能，将所有跨越的列加宽大致相同的量。
  4. 对于具有除“auto”之外的“width”的每个列组元素，增加它跨越的列的最小宽度，以便它们加在一起至少与列组的“width”一样宽。

这给出了每列的最大和最小宽度。

字幕宽度最小值 (CAPMIN) 是通过为每个字幕计算最小字幕外部宽度来确定的，作为假设表格单元格的 MCW，该表格单元格包含格式为“显示：块”的字幕。最小字幕外部宽度中最大的是 CAPMIN。

列和标题宽度对最终表格宽度的影响如下：

  1. 如果 'table' 或 'inline-table' 元素的 'width' 属性具有除 'auto' 之外的计算值 (W)，则使用的宽度是 W、CAPMIN 和所有列所需的最小宽度加上单元格间距或边框 (MIN)。如果使用的宽度大于 MIN，则额外的宽度应分布在列上。
  2. 如果 'table' 或 'inline-table' 元素具有 'width: auto'，则使用的宽度是表的包含块宽度、CAPMIN 和 MIN 中的较大者。但是，如果 CAPMIN 或列所需的最大宽度加上单元格间距或边框 (MAX) 小于包含块的宽度，请使用 max(MAX, CAPMIN)。

列宽的百分比值是相对于表格宽度的。如果表格具有“宽度：自动”，则百分比表示对列宽度的约束，UA 应尝试满足该约束。（显然，这并不总是可能的：如果列的宽度为“110%”，则无法满足约束。）

于 2013-06-17T14:56:56.230 回答