0

以前に jquery とtable-layout: fixedCSS のプロパティを使用して幅を設定したデータのテーブルがあります。コードの後半で、セルの内容が変更される可能性があり、幅の変更が必要になる可能性があります。結果はこのフィドルのようなものです。

ご覧のとおり、長い文字列の場合、セルの内容はそれを含むセルから次のセルに流れ込みます。私がやりたいのは、更新後にセルの内容をチェックして、内容の幅がセルより大きいかどうかを確認することです。私のフィドルには、幅の更新を行うコメントアウトされた行があります。

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

問題は、202がハードコードされていることであり、それを取得する方法を理解できないようです。の内容の幅を見つけようとしている、.width()、.outerWidth()およびを試しましたが、役に立ちませんでした。私のコンテンツが aまたは類似のものである場合、その上で width メソッドを呼び出すことができることはわかっていますが、コンテンツのほとんどは単なるテキストであり、DOM 要素を追加したくありません。物事を遅くすることができるのに十分です。.innerWidth()tdspan

のテキストコンテンツの幅を取得する良い方法はありtdますtableか?

4

2 に答える 2

1

テーブルで width auto を設定するだけです：

デモ

width: auto;

または、textWidth スニペットを使用します。

デモ

$.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-12T21:52:26.563 に答える
0

行に を指定してidから、そのscrollWidthプロパティ値を使用し、この css ルールを更新して scrollWidth を width にする必要があります。

th, td

th, td{
border: 1px solid black;
width: 203px; /* your scrollWidth value here */
height: 20px;
}
于 2013-04-12T22:07:12.503 に答える