1

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

使用 white-space:nowrap 将文本保留在一行中，但会导致悬停的文本运行到右侧的单元格/后面，从而导致两个字符串的混乱。此外，悬停背景颜色仅与原始单元格宽度一样远。（我尝试将宽度设置为更大的值，但它不会改变任何东西。）

使用 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 回答
0

这是你想要的吗？我正在使用 jQuery 动态调整td元素的大小：

$(document).ready(function() {

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

});
于 2013-08-07T16:21:01.130 回答