0

我有一个表格，它根据浏览器的高度改变它的大小。表格行内的单元格具有百分比高度，以便在表格完成时自动调整大小。

但是，对于某些高度值，单元格并没有完全占据表格的空间，有几个像素的间隙：

在此处输入图像描述

我对为什么会发生这种情况的预测是因为它不能将高度值平均分配到各行中，因此将小数结果向下舍入以阻止单元格溢出表格。

我的解决方案是计算余数，将其四舍五入，然后使用 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+"%");
    }
}

还值得注意的是，这个函数是在页面加载时手动调用的，以及在 resize 函数内部，$(window).resize()

当我测试它时，它最初使用的高度很小（< 600 像素），但对于大于此的值，它仍然会在表格底部添加 2-3 像素的间隙。

我在表格底部有一个不可见的行，hide()当某些任务不需要时它会隐藏自己（使用 jQuery 的函数），这会影响它吗？

有没有其他人遇到过这种情况，如果有，你是用什么方法克服的？我完全没有想法。

如果有任何帮助，我正在使用 Chrome 28，问题在 Firefox 22 上似乎并不明显，但在 Safari 6 上很明显（这让我认为这是一个 WebKit 问题）

谢谢。

4

0 回答 0