JQuery - 每次點擊表格都會改變單元格寬度

Question

我有一些表格單元格寬度的奇怪問題。所有我試圖做的，是用.WIDTH（）函數來獲取表格單元格的寬度，然後設置寬度在寬度屬性相同的細胞：

$table.find('tr:first td').each(function() { 
    var actualWidth = $(this).width(); 
    $(this).attr("width", actualWidth); 
}); 

每次我這樣做，它得到一個一些細胞的寬度不同（通常減少一個並增加另一個）。

我看到一個類似的問題，從2012年：jQuery width() returning incorrect values on table cells 但它是相當古老的和接受的答案似乎並不奏效。

小提琴：https://jsfiddle.net/awolf/40pj1b2u/

任何幫助將不勝感激。

Answer 1

我會認爲這是一個錯誤。 我的解釋： 讀取寬度時，它獲取內容寬度。 設置時，該框會被渲染，然後設置邊框（每次從內容中取1px）。 與.attr（），.prop（）和.width（）相同。

看一下box-sizing，.innerWidth（）和.outerWidth（）！

Answer 2

我覺得其中有兩個問題。所有與表格單元顯示有關。

1. 在 <table>使用邊界屬性（邊界=「1」）的讀出時可能弄亂的寬度值。設置attr（'width'）值時可能相同。爲了匹配最接近的實際值，您可以使用innerWidth（）作爲@Adam P建議的值。

2. 表格單元格寬度取決於完整的可用表格寬度。在jsfiddle示例中，擴展表區域時，單元格的寬度正在增加。因此，從每個單元格寬度中，您可以計算全局表寬度並應用它。

看到這個https://jsfiddle.net/piiantom/72dvm0v4/，取自你的JS調整。 表格邊框可以更改，JS仍然可以工作