複製單元格寬度以固定位置的克隆表

通過推廣this SO answer的代碼，我創建了一個小的jQuery插件，這使得它易於設置滾動標題任何表 - 也就是說，當您滾動這樣表格標題通常會在可視窗口之外，標題的克隆將固定在窗口的頂部，以便您可以查看哪些列是哪些列。這一切都工作正常，但我遇到的問題是，我無法獲得列寬度完全匹配克隆表和原始表之間。複製單元格寬度以固定位置的克隆表

我創建了一個的jsfiddle這表明了問題here。它的要點是，我用下面的循環細胞寬度從父表複製到克隆表：

$("#tbl1").find('tr').first().children().each(function(i, e) 
{ 
    $($("#tbl1_clone").find('tr').children()[i]).width($(e).width()); 
});

這是必要的，因爲克隆表只包括父表的頭的;它沒有任何內容，因此，如果沒有此步驟，其列寬將與父表不同。但是，這個循環不能正常工作。克隆表中的單元格寬度總是偏離幾個像素。這發生在兩個IE8和Chrome（大概是別人，雖然我沒有測試過。）

我在完全不知如何解決此問題。請檢查出the jsFiddle，因爲它解釋了比我更好的問題。

也許值得注意的是，當克隆表的位置是而不是固定時，相同的代碼似乎工作。但是，這對我來說沒有用，因爲我需要修復它。

來源

2011-03-25 Mitch Lindgren

出於某種原因，你的克隆表寬度屬性擺脫了計算。我不知道是什麼原因，但如果你使用：

$("#tbl1_clone").removeAttr('style');

在jQuery代碼一樣，here結束，它似乎工作。

來源

2011-03-28 04:29:25 DTing

這似乎確實做到了。非常感謝！只要SO允許我這樣做，我就會獎賞你的賞金。 – 2011-03-28 04:56:14

如果您爲單元格設置border爲1px，則問題依然存在：th，td {border：1px solid black; }'你可以從[jsFiddle]（http://jsfiddle.net/royling/YVMKu/76/）知道差距 – 2012-11-30 11:44:42

對不起，更新[jsFiddle]的鏈接（http://jsfiddle.net/royling/Jf6fs /） – 2012-11-30 12:03:54

嘗試使用offsetWidth，像...

// make each cell width in the header table, the same width as 
    // the cells in the orginal table (header table has one row) 
    $headerTable.find('td, th').each(function(index) 
    { 
     var width = originalTable.rows[0].cells[index].offsetWidth 
     this.width = width; 
    });

來源

2011-03-25 22:21:10

感謝您的建議，但它似乎沒有任何效果。我做得對嗎？ http://jsfiddle.net/YVMKu/5/ – 2011-03-25 22:55:35

我知道這個問題是真的老了......但我偶然發現了它有一個類似的問題，想我會添加一個答案僅供參考。

我花了大約一週的時間才意識到從Element.offsetWidth()切換到Element.getBoundingClientRect().width完全解決了我的問題。

我不知道關於jQuery的......但我使用純JS做同樣的事情在這裏（克隆我的表頭，並在複製的寬度）和我有沒有做那個奇怪的寬度問題任何意義......這完全解決了它。

顯然Element.getBoundingClientRect().width會將寬度設置爲最接近的分數，而Element.offsetWidth()會將其舍入爲最接近的整數。

您可以查看這個答案的詳細信息（他們會解釋它優於我可以現在）：How do I retrieve an HTML element's actual width and height?

來源

2018-01-17 22:57:27 mattroberts33

複製單元格寬度以固定位置的克隆表

回答

相關問題