将鼠标悬停在表格中的单元格上，将整个字符串显示在一行中，居中

I have a table with cells that display a lot of data of varying lengths, some of which get cut off because the string is too long to fit into the column (this is fine). I would like to add the functionality to center and display the entire String in one line when hovering over a particular cell, covering columns to the right/left if necessary.

我有一个表格,其中显示了大量不同长度的数据,其中一些因为字符串太长而无法插入列中而被切断(这很好)。我想添加功能以居中并在将鼠标悬停在特定单元格上时将整个字符串显示在一行中,必要时覆盖右侧/左侧的列。

Using white-space:nowrap keeps the text in one line, but causes the hovered text to run into/behind the cell to the right, resulting in a jumbled mess of two strings. Also, the hover background color only goes as far as the original cell width. (I have tried setting the width to something larger, and it doesn't change anything.)

使用white-space:nowrap将文本保持在一行中,但会导致悬停的文本向右/向后移动到单元格中,导致两个字符串混乱。此外,悬停背景颜色仅与原始单元格宽度一致。 (我已经尝试将宽度设置为更大的宽度,并且它不会改变任何东西。)

Using white-space:normal allows me to view the whole String (as it wraps the text), and the hover background color dynamically expands to cover the entire expanded cell, but I do not want the cell to expand in height and push rows below it down.

使用white-space:normal允许我查看整个String(当它包装文本时),并且悬停背景颜色动态扩展以覆盖整个扩展单元格,但我不希望单元格在高度上扩展并在下方推送行它失败了。

Does anyone have any suggestions?

有没有人有什么建议?

2 个解决方案

#1

Since I didn't know what your initial data was I went ahead and just made a small table with some extended data. Here is an example of what your looking for if I read your question correctly.

由于我不知道你的初始数据是什么,所以我继续做了一个包含一些扩展数据的小表。如果我正确地阅读了您的问题,这是您要查找的内容的示例。

Not CSS - If you were to use just CSS you would have to hook hover then apply styles accordingly. Not sure what yours looks like so I won't screw your table up.

不是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;
}

#2

Is this something you're going for? I'm using jQuery to dynamically resize the td elements:

这是你想要的东西吗?我正在使用jQuery动态调整td元素的大小:

$(document).ready(function() {

  $('td').mouseover(function() {
    $(this).css('max-width', 'inherit');
  }).mouseout(function() {
    $(this).css('max-width', '100px');
  }) 

});

#1