加入收藏 | 设为首页 | 会员中心 | 我要投稿 李大同 (https://www.lidatong.com.cn/)- 科技、建站、经验、云计算、5G、大数据,站长网!
当前位置: 首页 > 综合聚焦 > 资源网站 > 资源 > 正文

html – 如何在浏览器中确定列宽?

发布时间:2020-12-14 18:48:05 所属栏目:资源 来源:网络整理
导读:表中列的实际宽度如何确定? 下面的代码看起来(在Chrome中),如下所示: 我的问题是,使用“ddd …”添加任何更多的字符到单元格中,不使用可用空间,但是其他单元格的内容将被包装.有时候问题是文本“aaa …”和“ccc …”不会重叠.表的总大小是固定的,但所有的
表中列的实际宽度如何确定?
下面的代码看起来(在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>

解决方法

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

CSS3还没有覆盖,但这部分规范是非规范的,所以浏览器可能并不完全符合(这个行为没有规范的定义).

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,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.)

(编辑:李大同)

【声明】本站内容均来自网络,其相关言论仅代表作者个人观点,不代表本站立场。若无意侵犯到您的权利,请及时与联系站长删除相关内容!

    推荐文章
      热点阅读