使用百分比高度时,表格行单元格不会填满整个表格高度

时间:2013-07-24 13:53:06

标签: jquery html css webkit html-table

我有一张表根据浏览器的高度改变其大小。表格行内的单元格具有百分比高度,因此它们会在表格时自动调整大小。

但是,对于某些高度值,单元格并没有完全占据桌子的空间,只有几个像素的间隙:

enter image description here

我对于为什么会发生这种情况的预测是因为它无法在行之间均匀地划分高度值,因此将小数结果向下舍入以阻止单元格溢出表格。

我的解决方案是计算余数,将其四舍五入,然后使用JavaScript将其应用于底行的单元格。这意味着一行略高于其他行,但对我来说无关紧要。

因此,在窗口更改高度时,我在函数中调整了表的大小,我添加了以下代码,希望它能解决问题:

var divisionResult = tableHeight/rowsNeeded;

var roundedDivision = Math.round(divisionResult);
var remainderPercentage = Math.ceil(100 - divisionResult); 

if (divisionResult % 1 !== 0) {
    //not an integer        

    if (rowsNeeded == 4) {
        //setting it only on the first cell applies to the entire row

        $("table tr:nth-last-child(2)").children().first().css("height", remainderPercentage+"%");
    } else if (rowsNeeded == 5) {
        $("table tr:last-child").children().first().css("height", remainderPercentage+"%");
    }
}

值得注意的是,在页面加载时以及在调整大小函数$(window).resize()

内部手动调用此函数

当我进行测试时,它最初的工作高度很小(<600px),但是对于大于此值的值,它仍会在表格的底部添加2-3像素间隙。

我在表底部有一个隐藏的行(当使用jQuery的hide()函数时)隐藏它(如果某些任务不需要,可能会影响它吗?)

有没有其他人遇到过这种情况,如果有,你用什么方法来克服它?我完全没有想法。

如果有任何帮助,我使用的是Chrome 28,这个问题在Firefox 22上似乎不明显,但在Safari 6上显而易见(这让我认为这是一个WebKit问题)

感谢。

0 个答案:

没有答案