内容にかかわらず常に表の列の幅を固定する

Question

table-layout: fixedのhtmlテーブルと幅が設定されたtdがあります。列は依然として展開され、スペースを含まないテキストの内容を保持します。 div内の各tdの内容をラップする以外の方法がありますか？

例：例ではhttp://jsfiddle.net/6p9K3/29/

<table> 
    <tbody> 
     <tr> 
      <td style="width: 50px;">Test</td> 
      <td>Testing 1123455</td> 
     </tr><tr> 
      <td style="width: 50px;">AAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAA</td> 
      <td>B</td> 
     </tr> 
    </tbody> 
</table> 

table 
{ 
    table-layout: fixed; 
} 

td 
{ 
    border: 1px solid green; 
    overflow: hidden; 
} 

、あなたはAAAAAAAAAAAAとの列が...明示的に広いは50pxに設定されているにもかかわらず拡大していることがわかります。

Answer 1

テーブルの幅を指定：幅だけのために（：または "隠されたオーバーフロー-X"：

table 
{ 
    table-layout: fixed; 
    width: 100px; 
} 

あなたはまた、 "隠されたオーバーフロー" で作業することができjsFiddle

Answer 2

max-width：50pxに設定してみます。

Answer 3

cssの前にテーブルを固めます。テーブルの幅を計算し、次に「制御」行を使用して、各tdが明示的な幅を持つようにします。これらの幅はすべて、表タグの幅に加算されます。

何百ものhtml電子メールをどこでもうまく動作させるためには、正しいHTMLをまず使用して、w/cssをスタイリングすることは、すべてのIE、Webkit、およびMozillaの多くの問題を回避します。そう

：

<table width="300" cellspacing="0" cellpadding="0"> 
    <tr> 
    <td width="50"></td> 
    <td width="100"></td> 
    <td width="150"></td> 
    </tr> 
    <tr> 
    <td>your stuff</td> 
    <td>your stuff</td> 
    <td>your stuff</td> 
    </tr> 
</table> 

が広い300ピクセルでテーブルを維持します。

word-wrap:break-word; 

Webブラウザが壊れアップべきではない「という言葉」はデフォルトでそう何を経験していることの正常な動作です：両極端によって幅より大きい画像

Answer 4

には、以下のCSSに探してみ見ますブラウザ。ただし、これをワードラップCSSディレクティブで上書きすることはできます。

テーブル全体に幅を設定し、列に幅を設定する必要があります。 "width：100％;"あなたの要求に応じてOKでなければなりません。

ワードラップを使用することはできませんが、レイアウトを変形することなくすべてのデータを表示するのに便利です。

Answer 5

にdivを追加してからスタイルを変更できます。期待どおりに動作するはずです。

<td><div>AAAAAAAAAAAAAAAAAAA</div></td> 

次にcss。

td div { width: 50px; overflow: hidden; } 

Answer 6

を参照してください。 ）。これには、定義された幅（および/または高さ？）と、おそらくは "display：ブロック"が必要です。

"オーバーフロー：非表示"は、定義されたボックスに収まらないコンテンツ全体を非表示にします。

例：

http://jsfiddle.net/NAJvp/

HTML：

<table border="1"> 
    <tr> 
     <td><div>aaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaa</div></td> 
     <td>bbb</td> 
     <td>cccc</td> 
    </tr> 
</table> 

CSS：

td div { width: 100px; overflow-y: hidden; } 

EDIT：私の恥、私が見てきた、あなたはアルすぐに使える "オーバーフロー"。私はあなたの要素に "表示：ブロック"を設定していないので、それが動作しないと思います...