html5 表格撑大,css – 具有相对大小的表格列,格式为HTML5

我会使用一些小的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

{

if(myOtherCols[i].className === 'otherCols')

{

myOtherCols[i].style.width = sizeOtherCols+'px';

}

}

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

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

在CSS中,主要思想如下：

.col1{

display:table;

float:right;

}

为第一列添加标签显示：table.这将适合所有浏览器的适合内容.

添加一个浮动：向右将第一列推到右边,并将其“粘”到表的其余部分.

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

您总是可以尝试使用负左边距(我不建议),以便在左侧移动您的桌子.