web-dev-qa-db-ja.com

テーブルの列幅を制限するにはどうすればよいですか？

テーブル内の列の1つに、空白なしの長いテキストを含めることができます。たとえば、幅を150ピクセルに制限するにはどうすればよいですか？常に150pxにしたくない（空の場合は幅を狭くする）が、長いテキストがある場合は150pxで制限し、テキストを折り返すようにしたい。

以下にテスト例を示します。 http://jsfiddle.net/Kh378/ （3列目を制限しましょう）。

前もって感謝します。

更新：
このスタイルの設定：

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

iE8（別のコンピューターでテスト済み）では動作せず、IEのどのバージョンでも動作しないと思います。

htmlcssinternet-explorercss-tables
61
nightcoder

更新済み

テーブルのtdおよびthタグに追加したもの：

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

すべてのブラウザで完全に互換性があるわけではありませんが、最初からです。

59
Brandon

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

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

ただし、<thead> セクション。

6
Carlos Toledo

以下を使用して列のスタイルを設定できるはずです。

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

ご了承ください Word-wrapは、IE 5.5 +、Firefox 3.5+、およびWebKitブラウザー（ChromeおよびSafari）でサポートされています。

4
isNaN1247

Chromeでいくつかの実験を行った後、私は次のようになりました。

  • テーブルに<th>があり、「幅」または「最大幅」が設定されている場合
  • <td>には「max-width」と「Word-wrap：break-Word;」が設定されている必要があります

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

したがって、この機能は非常に複雑です。そして、ヘッダーや「ブレークワード」を必要とする長い文字列のないテーブルも勉強しませんでした。

2
user2587656

非常に簡単です

これらのような属性を追加できます

最大幅

最大高さ

属性としてhtmlで、またはスタイルとしてCSSで設定できます

1
Kano

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

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');
        }
    });
}

この関数は、$（window）.on（ 'resize'、...）で複数回呼び出すことができます

this.$el

親要素を表し、私の場合はマリオネットを持っています

max-widthを持つべきth番目の要素には、次のようなmax-width属性があるはずです：

<th max-width="120">
0
user2846569

1）必要に応じて、<th>の各列の幅を指定します。

2）<td>の<tr>の各<table>にワードラップを追加します。

Word-wrap: break-Word;
0
Amay Kulkarni