8

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

在 HTML4 的过去，我可以通过使用“相对大小”功能将每列的大小指定为整体的比例来做到这一点：

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

但是，现在不推荐使用 width 属性，我们应该改用 CSS。但我还没有找到任何用 CSS 复制它的方法；CSS 大小说明符只允许我将宽度指定为固定大小或整体的一小部分，我真正需要的是第一列被取走后剩下的一小部分。

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

4

1 回答 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所有浏览器一样工作。添加 afloat:right会将第一列推到右侧并将其“粘贴”到表格的其余部分。

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

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

于 2012-11-20T10:41:16.720 回答