Question

我在工作提示中定位表中的数据列时遇到了一些麻烦，该表本身位于垂直滚动div中。给你一点背景......

由于我无法控制的遗留问题，我正在开发的页面必须通过固定宽度和高度的iframe显示。我需要显示的数据大约有12列，所有这些列都需要显示。一列将包含序列号，有时最终会溢出单元格的边界。我已将此列的溢出设置为显示省略号，并添加了工具提示，如this问题的已接受答案中所述。

添加工具提示后，它会显示从表格顶部到悬停单元格的距离，并绘制工具提示与父div顶部的距离。这意味着，当您向下滚动div时，工具提示最终会被拉到div底部的下方。

我创建了一个jsFiddle来演示：http://jsfiddle.net/kuzxLwxe/4/

这是我的css：

.ResultsWrapper {
    width:150px;
    height:314px;
    text-align:center;
    overflow-x:hidden;
    overflow-y:scroll;
    border:1px solid black;
}
.ResultsTable {
    width:86px;
    border-collapse:collapse;
    table-layout:fixed;
}
.ResultsTable th, .ResultsTable td {
    border:1px solid black;
    overflow:hidden;
    text-overflow:ellipsis;
}
.ColumnSerialNo {
   width:81px;
}
.hasTooltip span {
    display: none;
    color: #000;
    text-decoration: none;
    padding: 3px;
}
.hasTooltip:hover span {
    display: block;
    position: absolute;
    background-color: #FFF;
    border: 1px solid #CCC;
    margin: 2px 10px;
}

我的HTML：

<div class="ResultsWrapper">
    <table class="ResultsTable">
        <thead>
            <tr>
                <th class="ColumnSerialNo">Serial Number</th>
            </tr>
        </thead>
        <tbody>
            <tr>
                <td class="hasTooltip">3119985815206<span>3119985815206</span></td>
            </tr>
            <tr>
                <td class="hasTooltip">5665811486586<span>5665811486586</span></td>
            </tr>
            ...
        </tbody>
    </table>
</div>

我在同一页面中使用jQuery进行其他操作，但到目前为止还没有能够用它来提供解决方案。如果您认为解决此问题的最佳方法是使用JS或jQuery，我很乐意看到结果！

提前致谢

Answer 1

更改HTML标记以更好地控制overflow：

<tr>
    <td class="hasTooltip">
        <div class="SerialNumberContainer">
            <div class="SerialNumber">3119985815206</div>
            <div class="SerialNumberTooltip">3119985815206</div>
        </div>
    </td>
</tr>

在您的CSS中，从overflow移除td：

.ResultsTable th, .ResultsTable td {
    border:1px solid black;
    /* overflow: hidden; this line should delete */
    text-overflow:ellipsis;
}

新CSS：

.SerialNumberContainer {
    position: relative;
    z-index: 10;
}

.SerialNumber {
    width: 80px;
    overflow: hidden;
}

.SerialNumberTooltip {
    position: absolute;
    top: 10px;
    left: 2px;
    background-color: #FFF;
    border: 1px solid #CCC;
    display: none;
}

.SerialNumberContainer:hover {
    z-index: 20;
}

.SerialNumberContainer:hover .SerialNumberTooltip {
    display: block;
}

JSFiddle Demo

如何在滚动<div>？</div>中修复工具提示的位置

1 个答案: