1

さまざまな長さの多くのデータを表示するセルを含むテーブルがありますが、文字列が長すぎて列に収まらないために一部が切り取られます (これは問題ありません)。特定のセルにカーソルを合わせると、文字列全体を中央に配置して 1 行に表示し、必要に応じて列を右/左にカバーする機能を追加したいと考えています。

white-space:nowrap を使用すると、テキストは 1 行に保持されますが、ホバーしたテキストが右側のセルの内側または後ろに移動し、2 つの文字列がごちゃ混ぜになります。また、ホバーの背景色は、元のセルの幅までしかありません。（幅をもっと大きく設定してみましたが、何も変わりません。）

white-space:normal を使用すると、(テキストをラップするため) 文字列全体を表示でき、ホバーの背景色が動的に拡大して展開されたセル全体をカバーしますが、セルの高さを拡大して下に行をプッシュしたくありませんそれを下げます。

誰か提案はありますか？

4

2 に答える 2

4

最初のデータが何であるかわからなかったので、拡張データを含む小さなテーブルを作成しました。あなたの質問を正しく読んだ場合、あなたが探しているものの例を次に示します。

CSS ではない - CSS だけを使用する場合は、ホバーをフックして、それに応じてスタイルを適用する必要があります。あなたがどのように見えるか分からないので、あなたのテーブルを台無しにするつもりはありません。

http://jsfiddle.net/zWfac/

HTML

<div id='container'>
    <table>
        <tbody>
            <th>Header 0</th><th>Header 1</th>
            <tr>
                <td>0,0 - My extended content that doesn't fit in the table</td> <td>0,1</td>
            </tr>
            <tr>
                <td>1,0</td> <td>1,1</td>
            </tr>
            <tr>
                <td>2,0</td> <td>2,1 - More extended content!</td>
            </tr>
        </tbody>
    </table>
</div>

Javascript + JQuery

var container = $("#container");

$("td").hover(function ()
              {
                  container.children(".tooltip").remove(); 

                  var element = $(this);
                  var offset = element.offset();
                  var toolTip = $("<div class='tooltip'></div>");

                  toolTip.css(
                      {
                          top : offset.top,
                          left : offset.left
                      });

                  toolTip.text(element.text());
                  container.append(toolTip);
              });

CSS

tr
{
    width: 100%;
}

td, th
{
    width: 65px;
    max-width: 65px;
    white-space: nowrap;
    overflow: hidden;
}

.tooltip
{
    position: absolute;
    color: white;
    background-color: tan;
    text-align: center;
    border: 1px solid #000;
}
于 2013-08-07T16:50:49.513 に答える