web-dev-qa-db-ja.com

CSSを使用して表のセルを1行のテキストに制限する方法は？

各行に名前、電子メールアドレスなどが含まれるユーザーのテーブルがあります。一部のユーザーにとっては、この行は1テキスト行の高さであり、他のユーザーにとっては2行などです。しかし、テーブルの各行は1テキスト行の高さで、残りは切り捨てられます。

次の2つの質問を見ました。

実際、私の質問は最初の質問とまったく同じですが、リンクが無効になっているため、調査できません。どちらの答えもwhite-space: nowrapを使用するように言っています。しかし、これは機能しません。多分私は何かを見逃しています。

コードを表示できないため、問題を再現しました。

<style type="text/css">
td {
    white-space: nowrap;
    overflow: hidden;
    width: 125px;
    height: 25px;
}
</style>

<div style="width:500px">
<table>
    <tr>
        <td>lorem ipsum here... blablablablablablablablablabla</td>
        <td>lorem ipsum here... blablablablablablablablablabla</td>
        <td>lorem ipsum here... blablablablablablablablablabla</td>
        <td>lorem ipsum here... blablablablablablablablablabla</td>
    </tr>
</table>
</div>

white-spaceがなければ、テーブルの幅は500ピクセルで、テキストは複数行になります。

ただし、white-space: nowrapを使用すると、ブラウザはwidthディレクティブを無視し、すべてのデータが1行に収まるまでテーブルの幅を広げます。

何が間違っていますか？

csshtml-tableoverflow
36
Tomaka17

オーバーフローは、オーバーフローしたと見なす場所を知っている場合にのみ機能します。 <td>の幅と高さの属性を設定する必要があります

TAKE 2

table-layout: fixed; width:500px;をテーブルのスタイルに追加してみてください。

更新3

これが機能することを確認しました： http://jsfiddle.net/e3Eqn/

22
Mike Sherov

以下をスタイルシートに追加します。

table { white-space: nowrap; }

33
Googuez

以下をスタイルシートに追加します。

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

テーブルの幅を追加して、次のプロパティが指定されたサイズに要素を合わせられるようにする必要があります。ここのtable-layoutプロパティは、指定された500ピクセル内の固定レイアウトを使用するようブラウザーに強制します。

6
cm2
  <table border="1" style="width:200px">
<tr>
    <td>Column 1</td><td>Column 2</td>
</tr>
<tr>
   <td nowrap="nowrap">
    
                Single line cell just do it</td>
   <td>
        
                multiple lines here just do it</div></td>
</tr>
</table>

シンプルで便利。上記のコードを

2
user2782717