獲取固定表上的td內容的寬度

我有一個數據表，我以前已經在CSS中設置了使用jquery和table-layout: fixed屬性的寬度。後來在我的代碼中，單元格的內容可能會改變，可能需要改變寬度。結果就像this fiddle.獲取固定表上的td內容的寬度

正如你所看到的，對於長字符串，單元格內容流出它們包含的單元格並進入下一個單元格。我想要做的是在更新它之後檢查單元格的內容，看看內容的寬度是否大於單元格。在我的小提琴，還有一個註釋掉線，做寬度更新：

$('.firstItem').width(202) //successfully fits my entry

的問題是202被硬編碼，我似乎並沒有能夠弄清楚如何得到它。我嘗試.width(),.outerWidth()和.innerWidth()上的td，我試圖找到內容的寬度，但無濟於事。我知道，如果我的內容是span或類似的東西，我可以調用我的寬度方法，但我的大部分內容只是文本，我寧願不添加更多的DOM元素，因爲我的表已經在足夠大，它可以放慢速度。

在table中有沒有一種很好的方法來獲得td的文本內容的寬度？

來源

2013-04-12 ckersch

http://jsfiddle.net/yUPET/3/ - 你可以在'白space'的工作作風，以不包裹溢出的長單詞 – Ian

爲了便於閱讀，我想將單詞放在一起，但只是使用javascript或jquery更新單元格的寬度以適合內容。有沒有辦法做到這一點？ – ckersch

只設置表格的寬度自動：

DEMO

width: auto;

或者使用輸出textWidth片段：

DEMO

$.fn.textWidth = function(text){ 
    var org = $(this) 
    var html = $('<span style="postion:absolute;width:auto;left:-9999px">' + (text || org.html()) + '</span>'); 
    $('body').append(html); 
    var width = html.width(); 
    html.remove(); 
    return width; 
} 

$('.firstItem').width($('td.firstItem').textWidth());

來源

2013-04-12 21:52:26

我正在同步兩個表中的單元格的寬度來製作一個固定的標題，所以我需要能夠手動設置單元格的所有寬度，因此需要寬度控制。 – ckersch

@ckersch查看更新的答案 –

你應該給你排一個id然後用其scrollWidth屬性值並更新此CSS規則有你scrollWidth爲寬度：

th, td

th, td{ 
border: 1px solid black; 
width: 203px; /* your scrollWidth value here */ 
height: 20px; 
}

來源

2013-04-12 22:07:12

獲取固定表上的td內容的寬度

回答

相關問題