内容に関係なく、テーブルの列幅を常に固定するように強制します

table-layout: fixed幅が設定されたhtmlテーブルとtdがあります。列は、スペースを含まないテキストのコンテンツを保持するために引き続き展開されます。各tdの内容をdivでラップする以外にこれを修正する方法はありますか？

例：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;
}

この例では、幅が50pxに明示的に設定されているにもかかわらず、AAAAAAAAAAAA ...の列が展開されていることがわかります。

テーブルの幅を指定します。

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

jsFiddleを参照してください

次のCSSを調べてみてください。

word-wrap:break-word;

Webブラウザーはデフォルトで「単語」を分割するべきではないため、発生しているのはブラウザーの通常の動作です。ただし、これをワードラップCSSディレクティブでオーバーライドできます。

テーブル全体に幅を設定してから、列に幅を設定する必要があります。「幅：100％;」要件に応じて、OKになるはずです。

ワードラップの使用は希望どおりではない場合がありますが、レイアウトを変形せずにすべてのデータを表示するには便利です。

cssの前にテーブルをしっかりと固定します。テーブルの幅を計算してから、「制御」行を使用します。これにより、各tdに明示的な幅があり、そのすべてがテーブルタグの幅になります。

最初に正しいHTMLを使用して、どこでも機能するために何百ものhtmlメールを実行する必要があり、次に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>

テーブルの幅を300pxに保ちます。幅より極端に大きい画像を見る

にを追加divしてtd、スタイルを設定できます。期待どおりに動作するはずです。

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

次に、CSS。

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

「overflow：hidden」または「overflow-x：hidden」（幅のみ）を使用することもできます。これには、定義された幅（および/または高さ？）と、おそらく「display：block」も必要です。

「Overflow：Hidden」は、定義されたボックスに収まらないコンテンツ全体を非表示にします。

例：

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

編集：私に恥をかかせてください、私は見ました、あなたはすでに「オーバーフロー」を使用しています。要素に「display：block」を設定していないので、機能しないと思います...

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

パーセンテージを使用したり、列ヘッダーで次のように指定したりすることもできます。

<table width="300">  
  <tr>
    <th width="20%">Column 1</th>
    <th width="20%">Column 2</th>
    <th width="20%">Column 3</th>
    <th width="20%">Column 4</th>
    <th width="20%">Column 5</th>
  </tr>
  <tr>
    <!--- row data -->
  </tr>
</table>

パーセンテージの利点は、コードのメンテナンスが少なくなることです。列の幅を再指定しなくても、テーブルの幅を変更できます。

警告：ピクセルで指定されたテーブル幅はHTML5ではサポートされていないことを理解しています。代わりにCSSを使用する必要があります。

これは私のために働きます

td::after { 
content: ''; 
display: block; 
width: 30px;
}