web-dev-qa-db-ja.com

テキストがテーブルの幅と重ならないようにする

テーブルを制限するにはどうすればよいですか<td>エントリが長すぎるときに画面全体に拡大するエントリですか？

htmlcsshtml-tablewidth
28
daniel

さて、max-width、max-height、およびCSSのoverflow。

そう

td.whatever
{
    max-width: 150px;
    max-height: 150px;
    overflow: hidden;
}

最大幅と高さを150pxに制限します。150未満から150までの任意の値を設定できます。

オーバーフローのデフォルト（overflow: visible;）は、指定されたコンテナ内に収まらないものを、単にその外側にこぼすだけにすることです。水平方向のみに制限し、何も非表示にしたくない場合は、Word-wrapが役立つ場合があります。

td.whatever
{
    max-width: 150px;
    Word-wrap: break-Word;
}

Word-wrapは、Wordの末尾にない場合でも、必要なときに単語を分割します。テーブルをまったく拡大または縮小したくない場合は、heightとwidthを使用して固定サイズを指定することもできます。

52
Phoenix

Word-wrap:break-Word;を使用すると、長すぎる単語が折り返されます。

17
Floern
td.whatever_class{
    max-width: 100px;
}

100pxを必要な幅に置き換えます。 1000pxは、今日の人々が持つほぼすべてのモニターに適合するため、Webサイトに適した幅です。たとえば、20列ある場合は、50pxにします。

6
lavelle

max-widthスタイルとdisplayスタイルの両方を指定する必要があります（表示属性は通常の要素ではなくtdであるため、面白い設定になっているため）。

td{
    max-width: 100px;
    display: inline-block;
}
2
Dairy Window

プロパティmax-width：0pxを使用したNiceソリューションもあります。そのため、テーブルの幅全体に責任があります。

1
Experimenter