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

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

html css

Html 如何在浏览器中确定列宽？,html,css,html-table,Html,Css,Html Table,如何确定表中列的实际宽度？下面的代码（在Chrome中）如下所示：我的问题是，在单元格中添加更多字符时使用“ddd…”不会使用可用空间，但其他单元格的内容会被包装。有时问题是文本“aaa…”和“ccc…”不会重叠。表的总大小是固定的，但所有内容都是动态的，因此不首选固定布局。更新：尽管包含的文本比任何实际列都少，但第一行（c1-c4）对最终布局的影响非常显著（可能） <!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01//EN"> <

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


正文{背景：#000；颜色：#fff；字体系列：'Tahoma'；字体重量：600；}
.container{宽度：670px；}
表{字体系列：'Tahoma'；字体重量：600；边框颜色：#ffffff；边框宽度：1px；}
.明细表{左边距：20px；字体大小：24px；宽度：650px；}
.detail table.operational{text align:right；}
c1
c2
c3
补体第四成份
日期
17.6.2013
aaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaa
bbbbbbbbbb
CCCCCCCCCCCCCCCCCCCCCCCCCCCCCCCCCCCCCCCCCCCCCCCCCCCCCCCCCCCCCCCCCCCCCCCCCCCCCCCCCCCCCCCCCCCCCCCCCCCCCCCCCCCCCCCCCCCCCC
dddddddddddddddd
bbbbbbbb
噫噫噫噫噫噫
bbbbbbbbbb
XXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXX

来自

CSS3还没有覆盖这一点，但规范的这一部分是非规范性的，因此浏览器可能不完全符合它（afaik中没有对这种行为的规范定义）

列宽的确定如下所示：

计算每个单元格的最小内容宽度（MCW）：格式化内容可以跨越任意行数，但不能溢出单元格盒子。如果单元格的指定“宽度”（W）大于MCW，W 是最小单元格宽度。值“auto”表示MCW是最小单元格宽度。另外，计算每个单元格的“最大”单元格宽度：格式化除显式换行以外不换行的内容发生

对于每列，根据仅跨该列的单元格。最低要求是具有最大最小单元格宽度（或“宽度”列）的单元格，以较大者为准）。最大值是具有最大单元格宽度（或“宽度”列，以较大者为准更大）

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

对于除“自动”之外的“宽度”的每个列组元素，增加其跨越的柱的最小宽度，以便它们的宽度至少与列组的“宽度”相同这为每列提供了最大和最小宽度

字幕宽度最小值（CAPMIN）通过计算每个标题的最小标题外部宽度为假设表单元格，包含格式为的标题 “显示：块”。最小标题外部宽度的最大值为卡普明

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

如果“table”或“inline table”元素的“width”属性具有除“自动”之外的计算值（W），使用的宽度为以下值中的较大值： W、 CAPMIN，以及所有列和单元格所需的最小宽度间距或边框（最小值）。如果使用的宽度大于最小值，则额外的宽度应分布在立柱上

如果“表”或 “inline table”元素具有“width:auto”，使用的宽度是包含块宽度、CAPMIN和MIN的表格中较大者。但是，如果CAPMIN或列所需的最大宽度加上单元格间距或边框（最大值）小于包含块，使用最大值（最大值，CAPMIN）列宽的百分比值相对于表格宽度。如果表格具有“宽度：自动”，则百分比表示约束列的宽度，UA应尽量满足该宽度。（显然，这并不总是可能的：如果列的宽度为“110%”，则无法满足约束。）