Question

如何确定表格中列的实际宽度？下面的代码（在Chrome中）看起来像这样：

rendered table

我的问题是，使用“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>

Answer 1

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

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

列宽如下确定：


计算每个单元格的最小内容宽度（MCW）：格式化   内容可能跨越任意数量的行但可能不会溢出单元格   框。如果单元格的指定“宽度”（W）大于MCW，则W   是最小单元格宽度。值'auto'表示MCW是   最小单元宽度。   另外，计算每个单元格的“最大”单元格宽度：格式化   内容不会破坏除明确换行之外的行   发生。

对于每列，从中确定最大和最小列宽   仅跨越该列的单元格。最低要求是   最小单元格宽度最大的单元格（或“宽度”列，   以较大者为准）。最大值是单元格所需的最大值   最大单元格宽度（或“宽度”列，以较大者为准）   大）。

对于跨越多列的每个单元格，请增加最小值   它跨越的列的宽度，以便它们在一起，至少是   像细胞一样宽。对最大宽度执行相同操作。如果可能的话，   将所有跨越的列加宽大约相同的量。

对于“宽度”不是“自动”的每个列组元素，   增加它跨越的列的最小宽度，以便一起   它们至少与列组的“宽度”一样宽。

这为每列提供了最大和最小宽度。

标题宽度最小值（CAPMIN）通过计算来确定   每个标题的最小标题外部宽度为a的MCW   包含格式为的标题的假设表格单元格   “显示：阻止”。最小字幕外部宽度的最大值是   CAPMIN。

列和标题宽度会影响最终的表格宽度，如下所示：


如果'table'或'inline-table'元素的'width'属性有   计算值（W）不是'auto'，使用的宽度是更大的   W，CAPMIN，以及所有列和单元格所需的最小宽度   间距或边界（MIN）。如果使用的宽度大于MIN，则   额外宽度应分布在列上。

如果'表'或   'inline-table'元素有'width：auto'，使用的宽度是   包含块宽度，CAPMIN和MIN的表的更大值。   但是，如果要么是CAPMIN，要么是列所需的最大宽度   加上单元格间距或边框（MAX）小于包含的单元格间距或边框   阻止，使用max（MAX，CAPMIN）。

列宽的百分比值是相对于表格宽度的。   如果表格具有“width：auto”，则百分比表示约束   在列的宽度上，UA应该尝试满足。（明显，   这并不总是可行的：如果列的宽度是'110％'，那么   约束不能满足。）

Answer 2

表格的大小是“流动的”。这意味着您可以指定大小，但是，如果内容需要更多空间，则表格会将大小增加到所需大小。

您已指定：

.detail table{margin-left:20px; font-size:24px; width:650px;}

这可以被认为是表格的最小宽度。

如何在浏览器中确定列宽？

2 个答案: