2011-09-14 7 views
48

テーブルの1つの列に、空白のない長いテキストを入れることができます。どのようにして幅を150pxに制限できますか?私はそれが150px(常に空であればそれは狭くなければならない)であることを望んでいませんが、長いテキストがあれば、それを150pxとラップされるテキストで制限します。テーブルの列幅をどのように制限できますか?

ここにテストの例があります:http://jsfiddle.net/Kh378/(3列目を制限しましょう)。

ありがとうございます。

更新:
このスタイルを設定する:

word-wrap: break-word; 
max-width: 150px; 

はIE8で動作しません(別のコンピュータ上でテスト)と私はそれがIEのすべてのバージョンでは動作しませんと仮定します。テーブルのtdthタグに

+0

この質問はほぼ3歳で、現在のところ恩恵を受けていないので、まだ回答が必要かどうか疑問に思っていましたか? –

+1

@Frank Conijnはい、あります! :) – nightcoder

+0

2年後に返信しますが – Developer

答えて

48

Updated

私が追加:

word-wrap: break-word; 
max-width: 150px; 

必ずしもすべてのブラウザが、スタートでの完全な互換性を。

+1

残念ながら、IE8では動作しません(IEのどのバージョンでも動作しないと思います)。 )。 – nightcoder

2

あなたはとあなたのコラムをスタイルすることができるはずです。

max-width: 150px; 
word-wrap: break-word; 

word-wrapはIE 5.5以降、Firefoxの3.5+、およびWebKitのブラウザ(ChromeとSafariなど)でサポートされていることに注意してください。

+0

これをもっと詳しく、特に最大幅とそこにある(現在の)問題を、このページの類似/同等の解決策で参照してください。http://stackoverflow.com/a/24620364/2255628 –

3

質問はanother StackOverflow threadで回答されました。つまり、max-widthの代わりにwidthを使用するだけです。

+0

それは私のためには機能しません。あなたはjsfiddleを準備してください。 – nightcoder

5

代わりに幅を使用する必要があります。

<table> 
    <thead> 
     <tr> 
      <th>Name</th> 
      <th>Age</th>     
      <th style="width: 150px;"></th> 
     </tr> 
    </thead> 
    <tbody> 
    </tbody> 
</table> 

ただし、ちょうど<thead>セクションです。

0

最大幅をシミュレートするためのオプションがあります:

simulateMaxWidth: function() { 
    this.$el.find('th').css('width', ''); // clear all the width values for every header cell 
    this.$el.find('th').each(function(ind, th) { 
     var el = $(th); 
     var maxWidth = el.attr('max-width'); 
     if (maxWidth && el.width() > maxWidth) { 
      el.css('width', maxWidth + 'px'); 
     } 
    }); 
} 

この関数は、$(ウィンドウ).on( 'サイズを変更'、...)を複数回

this.$el 
に呼び出すことができます

私は最大幅を持たなければならないものを目の要素にマリオネット

を持っている私の場合には、親要素を表し、同様のmax-width属性があるはずです

<th max-width="120"> 
0

1)各列の幅は、必要に応じて<th>に指定してください。

<td>の語句を、<table><tr>にそれぞれ追加します。Chromeでいくつかの実験をした後

word-wrap: break-word; 
0

私は次のように来た:

  • あなたのテーブルには、「幅」や「最大幅」は
  • 設定しておく必要がありますいずれか<th>を持っている場合<td>の "max-width"と "word-wrap:break-word;"が設定されている必要があります。

<th>に「幅」を使用すると、その値が使用されます。 <th>の「最大幅」を使用する場合は、<td>の「最大幅」の値が代わりに使用されます。

この機能は非常に複雑です。そして、私はヘッダーのないテーブルや長い文字列を使わずにテーブルを勉強していませんでした。

0

はそれが

はあなたが好きな属性を追加することができ、非常に簡単ですこれら

最大幅

彼らが属性としてHTMLに設定することができ

最大の高さまたはスタイルとしてのCSSで

関連する問題