次のような HTML テーブルがあります。
-------------------------------------------------
|Column 1 |Column 2 |
-------------------------------------------------
|this is the text in column |this is the column |
|one which wraps |two test |
-------------------------------------------------
しかし、オーバーフローを非表示にしたいのです。その理由は、テキストに詳細へのリンクが含まれており、「折り返し」によってレイアウトのスペースが大量に無駄になるからです。次のようになります (列やテーブルの幅を広げないでください。そうしないと、画面から外れたり、水平スクロールバーが作成されたりするためです)。
-------------------------------------------------
|Column 1 |Column 2 |
-------------------------------------------------
|this is the text in column |this is the column |
-------------------------------------------------
これを実現するために、さまざまな CSS テクニックを試してみましたが、うまくいきませんでした。これを実現できる唯一のものは、Mootables です。http://joomlicious.com/mootable/ですが、どうやって実現しているのかわかりません。CSS や Javascript を使用して独自のテーブルでこれを行う方法、または Mootables でどのように実現できるかを知っている人はいますか?
サンプル HTML:
<html><body>
<table width="300px">
<tr>
<td>Column 1</td><td>Column 2</td>
</tr>
<tr>
<td>this is the text in column one which wraps</td>
<td>this is the column two test</td>
</tr>
</table></body></html>
ベストアンサー1
CSSプロパティを使用する空白: ラップなしそしてオーバーフロー: 非表示あなたのTDに。
アップデート
あなたのコメントを見たばかりですが、何を考えていたのかよくわかりません。何度もやったことがあり、やり方を忘れてしまいました。私にとっては、これはほとんどのブラウザでうまく機能するアプローチです。td を制限しようとするのではなく、td 内でオーバーフロー インスタンスを処理する div を使用します。これには、td のスタイルを設定するのではなく、div にパディング、マージン、背景色などを追加できるという良い副作用があります。
<html>
<head>
<style>
.hideextra { white-space: nowrap; overflow: hidden; text-overflow:ellipsis; }
</style>
</head>
<body>
<table style="width: 300px">
<tr>
<td>Column 1</td><td>Column 2</td>
</tr>
<tr>
<td>
<div class="hideextra" style="width:200px">
this is the text in column one which wraps</div></td>
<td>
<div class="hideextra" style="width:100px">
this is the column two test</div></td>
</tr>
</table>
</body>
</html>
ボーナスとして、IEはブラウザ固有のtext-overflow:ellipsisスタイルを使用して、オーバーフローが発生した場合に省略記号を配置します。Firefoxでも同じことをする自動的にも動作しますが、自分でテストしたことはありません。
アップデート2
使い始めましたこの切り捨てコードJustin Maxwell によって数か月前から開発されており、Firefox でも正常に動作します。