表格列,HTML5中的相对大小

Question

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

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

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

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

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

Answer 1

我会使用一点 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;
}

为第一列添加 tag display:table。这对于所有浏览器都适用fit-content。添加 afloat:right会将第一列推到右侧并将其“粘”到表格的其余部分。

视觉效果正是您想要的。从消极的一面来看，问题是你的桌子比看起来的要多（在左边）。（基本上，如果您有一个包含 4 列的 400px 表格，它会自动为每列提供 4*100px。添加上面的 CSS 解决方案只会将 col1 移动到为该列提供的 100px 的右侧）。

您始终可以尝试使用负左边距（我不推荐），以便将表格移到左侧。