Question

我有一个数据表，我之前已经设置了使用jquery的宽度和CSS中的table-layout: fixed属性。稍后在我的代码中，单元格的内容可能会发生变化，可能需要更改宽度。结果类似于this fiddle.

正如您所看到的，对于长字符串，单元格内容从其包含的单元格流出并进入下一个单元格。我想要做的是在更新单元格后检查单元格的内容，看看内容的宽度是否大于单元格。在我的小提琴中，有一个注释掉的行可以更新宽度：

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

问题是202是硬编码的，我似乎无法弄清楚如何获得它。我在.width()上尝试了.outerWidth()，.innerWidth()和td，我试图找到内容的宽度，但无济于事。我知道，如果我的内容是span或类似的东西，我可以调用我的宽度方法，但我的大部分内容都只是文本，我宁愿不添加更多的DOM元素，因为我的表已经足够大，它可以放慢速度。

有没有一种方法可以在td中获取table的文字内容的宽度？

Answer 1

只需在表格上设置自动宽度：

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());

Answer 2

您应该为行添加id，然后使用其scrollWidth属性值并更新此css规则以使您的scrollWidth为宽度：

th, td

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

获取固定表上td内容的宽度

2 个答案: