BinaryDevelop
  1. ホーム
  2. javascript

htmlのテーブル行を強制的に1行にするCSS/Javascript

2023-10-23 10:39:24

質問

次のようなHTMLのテーブルがあります。 

-------------------------------------------------
|Column 1                   |Column 2           |
-------------------------------------------------
|this is the text in column |this is the column |
|one which wraps            |two test           |
-------------------------------------------------

しかし、私はオーバーフローを非表示にしたいのです。その理由は、テキストに詳細へのリンクが含まれており、"wrapping" があると、レイアウトで多くのスペースを浪費してしまうからです。このようにする必要があります (列やテーブルの幅を広げないでください。そうしないと、画面外に出てしまうか、水平スクロール バーが作成されるためです)。 

-------------------------------------------------
|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>

どのように解決するのですか？

CSSプロパティを使用する white-space: nowrap と overflow: hidden をtdに追加してください。

更新情報

あなたのコメントを見て、私は何を考えていたのかわからない、私はそれを行う方法を忘れてしまったので、何度もこれをやっている。これは、私の場合、ほとんどのブラウザでうまく機能するアプローチです...td を拘束しようとするのではなく、td の内部に div を使用して、オーバーフローのインスタンスを処理します。これは、td にスタイルを設定するのではなく、padding、margin、背景色などを 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

私は この切り捨てコード を使い始めたのですが、これはFireFoxでもきちんと動作します。

関連

最新

おすすめ

について
/
プライバシー・ポリシー
/
お問い合わせ
© 2022 BinaryDevelop. すべての権利は、それぞれの所有者に帰属します