浏览器中的列宽是如何确定的? [英] How is column width determined in browser?

查看：11
本文介绍了浏览器中的列宽是如何确定的?的处理方法，对大家解决问题具有一定的参考价值，需要的朋友们下面随着小编来一起学习吧！

问题描述

表格中列的实际宽度是如何确定的?下面的代码看起来(在 Chrome 中)是这样的:

我的问题是向带有ddd..."的单元格添加更多字符，未使用可用空间，但其他单元格的内容被包装.有时问题是文本aaa..."和ccc..."不会重叠.表格的总大小是固定的，但所有的内容都是动态的，所以固定布局不是首选.
更新:尽管包含的文本少于任何实际列，但第一行 (c1-c4) 对最终布局具有相当显着(积极)的影响.

<html><head><meta http-equiv="Content-Type" content="text/html; charset=UTF-8"><style type="text/css">身体{背景:#000；颜色:#fff;字体系列:'Tahoma';字体粗细:600；}.container {width:670px;}表 {font-family:'Tahoma';字体粗细:600；边框颜色:#ffffff；边框宽度:1px；}.detail table{margin-left:20px;字体大小:24px；宽度:650 像素；}.detail table .operational {text-align:right;}</风格><身体><div class="详细信息"><table border="1px" cellpadding="0px" cellspacing="0px" ><!-- 仅用于调试的第一行和边框--><tr><td >c1</td><td >c2</td><td >c3</td><td >c4</td></tr><tr ><td class="caption">日期</td><td class="value">17.6.2013</td><td class="operational" colspan="2">aaaaaaaaaaaaaaaaaaaaaa</td></tr><tr ><td class="caption">bbbbbbbb</td><td class="value" colspan="2">ccccccccccccccccc</td><td class="操作">dddddddddddddd</td></tr><tr ><td class="caption">bbbbbb bbb</td><td class="value" colspan="3">eeeeeeeeeeeeeeeeeeeeeeeeeeee</td></tr><tr ><td class="caption">bbb bbbbbb</td><td class="value" colspan="3">xxxxxxxxxxxxxxxxxx xxxxxxxxxxxxxxxxxxx</td></tr></tbody>

</body></html>

解决方案

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

这还没有被 CSS3 覆盖，但是这部分规范是非规范的，所以浏览器可能并不完全遵守它(这种行为没有规范的定义，afaik).

<块引用>

列宽确定如下:

  1. 计算每个单元格的最小内容宽度(MCW):格式化的内容可以跨越任意数量的行，但不能溢出单元格盒子.如果单元格的指定宽度"(W)大于 MCW，W是最小单元格宽度.'auto' 的值意味着 MCW 是最小单元格宽度.此外，计算每个单元格的最大"单元格宽度:格式化除了显式换行之外没有换行的内容发生.
  2. 对于每一列，从仅跨越该列的单元格.最低要求是具有最大最小单元格宽度的单元格(或列宽度"，以较大者为准).最大值是单元格所需的最大的最大单元格宽度(或列宽度"，以更大).
  3. 对于跨越多列的每个单元格，增加最小值它跨越的列的宽度，这样它们一起至少是像细胞一样宽.对最大宽度执行相同操作.如果可能的话，将所有跨越的列加宽大约相同的数量.
  4. 对于每个具有除 'auto' 之外的 'width' 的列组元素，增加它跨越的列的最小宽度，以便一起它们至少与列组的宽度"一样宽.

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

字幕宽度最小值 (CAPMIN) 是通过计算确定的每个字幕的最小字幕外部宽度作为一个的 MCW包含格式为标题的假设表格单元格显示:块".最小字幕外宽度中的最大值是卡敏.

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

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

列宽的百分比值是相对于表格宽度的.如果表格有'width: auto'，百分比代表一个约束在列的宽度上，UA 应该尝试满足.(明显地，这并不总是可能的:如果列的宽度为110%"，则不能满足约束.)

How is the actual width of columns in table determined? The code below looks (in Chrome) like this:

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>

解决方案

From http://www.w3.org/TR/CSS21/tables.html

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:

  1. 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.
  2. 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).
  3. 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.
  4. 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.

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:

  1. If the 'table' or 'inline-table' element's 'width' property has a computed value (W) other than 'auto', the used width is the greater of W, CAPMIN, and the minimum width required by all the columns plus cell spacing or borders (MIN). If the used width is greater than MIN, the extra width should be distributed over the columns.
  2. If the 'table' or 'inline-table' element has 'width: auto', the used width is the greater of the table's containing block width, CAPMIN, and MIN. However, if either CAPMIN or the maximum width required by the columns plus cell spacing or borders (MAX) is less than that of the containing block, use max(MAX, CAPMIN).

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屋！

查看全文
相关文章
前端开发最新文章
热门教程
热门工具
登录 关闭
扫码关注1秒登录
发送“验证码”获取 | 15天全站免登陆