html - コンテンツに関係なく、テーブルの列幅を常に固定するように強制する

Question

html テーブルとtable-layout: fixed幅が設定された 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;
}

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

Answer 1

表の幅を指定します。

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

jsFiddleを参照してください

Answer 2

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

word-wrap:break-word;

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

テーブル全体の幅を設定してから、列の幅を設定する必要があります。"幅:100%;" 要件に応じて、OK にする必要があります。

word-wrap を使用するのは望ましくないかもしれませんが、レイアウトを変形させずにすべてのデータを表示するには便利です。

Answer 3

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 に保ちます。横幅より極端に大きい画像を見る

Answer 4

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

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

次にcss。

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

Answer 5

「overflow: hidden」または「overflow-x: hidden」(幅のみ) を使用することもできます。これには、定義された幅 (および/または高さ?) と、おそらく「display: ブロック」も必要です。

「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」を要素に設定していないため、機能しないと思います...

Answer 6

私はそれを次のように設定してみます：

max-width: 50px;