web-dev-qa-db-ja.com

テーブル行のオーバーフローを非表示にする方法

テキストデータが大きすぎて収まらないHTMLテーブルがいくつかあります。そのため、これに対応するためにセルを垂直方向に拡張します。したがって、オーバーフローのある行は、データ量の少ない行の2倍の高さになります。これは受け入れがたい。テーブルに1emと同じ行の高さを強制するにはどうすればよいですか？

問題を再現するマークアップを次に示します。表の高さは1行のみで、オーバーフローしたテキストは非表示にしてください。

<!DOCTYPE html>

<html>
  <head>
    <title>Test</title>
    <meta http-equiv="content-type" content="text/html; charset=utf-8" />
    <style type="text/css">
      table { width:250px; }
      table tr { height:1em; overflow:hidden; }
    </style>
  </head>
  <body>
    <table border="1">
      <tr>
        <td>This is a test.</td>
        <td>Do you see what I mean?</td>
        <td>I hate this overflow.</td>
      </tr>
    </table>
  </body>
</html>
htmlcsshtml-table
55
Josh Stodola

tableのtable-layout:fixedとセルのwhite-space:nowrap;の2つの属性を指定する必要があります。 overflow:hidden;もセルに移動する必要があります

table { width:250px;table-layout:fixed; }
table tr { height:1em;  }
td { overflow:hidden;white-space:nowrap;  }

デモはこちら Firefox 3.5.3およびIE 7でテスト済み

97
Russ Cam

一般に、white-space: nowrap;を使用している場合、どの列に折り返される（またはセルを引き伸ばす）コンテンツが含まれるのかを知っているからでしょう。これらの列については、通常、特定のspan属性でclassにセルのコンテンツをラップし、特定のwidthを適用します。

例：

[〜＃〜] html [〜＃〜]：

<td><span class="description">My really long description</span></td>

[〜＃〜] css [〜＃〜]：

span.description {
    display: inline-block;
    overflow: hidden;
    white-space: nowrap;
    width: 150px;
}
22
user645077

最近のほとんどのブラウザでは、次を指定できるようになりました。

<table>
 <colgroup>
  <col width="100px" />
  <col width="200px" />
  <col width="145px" />
 </colgroup>
 <thead>
  <tr>
   <th>My 100px header</th>
   <th>My 200px header</th>
   <th>My 145px header</th>
  </tr>
 </thead>
 <tbody>
  <td>100px is all you get - anything more hides due to overflow.</td>
  <td>200px is all you get - anything more hides due to overflow.</td>
  <td>100px is all you get - anything more hides due to overflow.</td>
 </tbody>
</table>

次に、上記の投稿のスタイルを次のように適用する場合：

table {
    table-layout: fixed; /* This enforces the "col" widths. */
}
table th, table td {
    overflow: hidden;
    white-space: nowrap;
}

その結果、テーブル全体に隠れたオーバーフローがうまくできます。最新のChrome、Safari、Firefox、IEで動作します。私はIE 9より前ではテストしていません-しかし、私の推測では、それは7まで機能し、5.5または6のサポートを見るのに十分幸運になるかもしれません。;）

8
Troy Alford

これが私が試したものです。基本的に、「柔軟な」コンテンツ（長すぎる行を含むtd）をdivコンテナーに配置します。このコンテナーは高さが1行で、オーバーフローが隠されています。次に、テキストを非表示にラップします。ただし、スムーズなカットオフではなく、ワードブレークでブレークが発生します。

table {
    width: 100%;
}

.hideend {
    white-space: normal;
    overflow: hidden;
    max-height: 1.2em;
    min-width: 50px;
}
.showall {
    white-space:nowrap;
}

<table>
    <tr>
        <td><div class="showall">Show all</div></td>
        <td>
            <div class="hideend">Be a bit flexible about hiding stuff in a long sentence</div>
        </td>
        <td>
            <div class="showall">Show all this too</div>
        </td>
    </tr>
</table>
2
John Liungman

唯一の欠点は、テーブルのセル幅が同じであることです。これを回避する方法はありますか？ –ジョシュ・ストドラ10月12日15時53分

テーブルの幅と各テーブルセルの幅を定義するだけです

何かのようなもの

table {border-collapse:collapse; table-layout:fixed; width:900px;}
th {background: yellow; }
td {overflow:hidden;white-space:nowrap; }
.cells1{width:300px;}
.cells2{width:500px;}
.cells3{width:200px;}

それは魅力のように動作します：o）

1
Popara

class = "container"でdivでテーブルをラップする

div.container {
    width: 100%;
    overflow-x: auto;
}

それから

#table_id tr td {
   white-space:nowrap;
}

結果

overflow effect

0
Dan Alboteanu

JavaScriptが回答として受け入れられた場合、この問題に対処するためにjQueryプラグインを作成しました（この問題の詳細については、 CSS：テーブルセルの切り捨て、ただしできるだけ適合 を参照してください）。

プラグインを使用するには、単に入力します

$('selector').tableoverflow();

プラグイン：https://github.com/marcogrcr/jquery-tableoverflow

完全な例：http://jsfiddle.net/Cw7TD/3/embedded/result/

0
Marco