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;
}

为第一列添加标记display:table。对于所有浏览器，这将像fit-content一样工作。添加float:right会将第一列推到右侧，并将其“粘贴”到表格的其余部分。

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

你总是可以尝试使用负左边距（我不推荐），以便在左边移动你的桌子。

表格列，HTML5中的相对大小

1 个答案: