首页 文章

表格列，HTML5中的相对大小

提问于
浏览 次
6

我有一个有四列的表 . 第一列需要是适合内容的最小大小，其他三列需要大小相等，并占用表中的其余空间 . 我的 table 和我的内容都没有已知的大小 . （这是一个非常标准的可变大小标签和固定大小的数据布局 . ）

在HTML4的旧时代，我可以通过使用“相对大小”功能指定每列的大小作为整体的比例来实现此目的：

<colgroup>
  <col width="0*"/>
  <col width="1*"/>
  <col width="1*"/>
  <col width="1*"/>
</colgroup>

但是，width属性现在已弃用，我们应该使用CSS代替 . 但我还没有找到任何方法用CSS复制它; CSS大小说明符只允许我将宽度指定为固定大小或整体的一小部分，其中我实际需要的是第一列被删除后剩余的一小部分 .

有没有办法用现代技术做到这一点？ （请注意，我不能使用CSS3 . ）

css html5 html-table

1 回答

  • 0

    我会使用一些小的javascript来解决你的问题：http://jsfiddle.net/qR9g2/

    var tableSize = 400; // example of size
var firstCol = document.getElementById('firstCol_01');
var sizeOfFirstCol = firstCol.offsetWidth;
var myOtherCols = document.getElementsByTagName('td');
var nbcols = myOtherCols.length;
var sizeOtherCols = (tableSize-sizeOfFirstCol)/(nbcols-1);
for(var i=0;i<nbcols; i++)
{
    if(myOtherCols[i].className === 'otherCols')
    {
        myOtherCols[i].style.width = sizeOtherCols+'px';
    }
}

    首先给出整个表的大小 . 然后去获取第一列的大小，并将其余的宽度分配给其他列 .

    编辑：这是一个CSS解决方案 . 它并不完美，但总比没有好：http://jsfiddle.net/qR9g2/2/

    在CSS中，主要思想如下：

    .col1{
    display:table;
    float:right;
}

    为第一列添加标签 display:table . 对于所有浏览器，这将像 fit-content 一样工作 . 添加 float:right 将第一列推到右侧，"stick"将其推送到表的其余部分 .

    视觉效果正是您想要的 . 从消极方面来看，问题是你的 table 占据了更多的位置（左侧） . （基本上如果你有一个包含4列的400px表，它会自动为每列提供4 * 100px . 添加上层CSS解决方案只会将100px右侧的col1移位到该列） .

    您总是可以尝试使用负左边距（我不建议），以便在左侧移动您的 table .

    回复于

相关问题