jquery - 在单元格中的数据上方显示一些数据

Question

我将表定义为:

<table role="grid" style="height: auto;"><colgroup><col style="width:200px">

<tr data-uid="5b6a6a00-3dc5-44bd-b2a4-f7a04879385c" role="row" style="outline: 1px solid rgba(0, 0, 0, 0.15);">
<td role="gridcell"><span>795368339</span><span class="NoType" begin="338" end="348"> AMANULLAH</span><span class="PhoneNumber" begin="329" end="338" style="background-color: rgb(144, 238, 144);" data-original-title=""></span>
</td>
</tr>
</tbody>
</table>

fiddle 在 http://jsfiddle.net/m7JLJ/

我需要在单元格中的姓名或电话号码上方显示一些数据。它必须被切换。

如何使用 CSS 实现？

我可以使用 jQuery 切换它，但我很难在数据上方显示数据。在细胞中

Answer 1

在 td(数据持有者单元格)上 aplly 'position:relative;'在跨度(数据本身)上应用“position:absolute；”

现在它们彼此重叠，您可以通过 jquery 在它们之间切换。

但是现在，td 高度将为 0，所以我的建议是在数据之前添加一个空跨度，如下所示；

HTML:

<td class="Holder">
    <span class="Filler"></span>
    <span class="Phone">01234567</span>
    <span class="OtherData">my name is</span>
</td>

CSS

.Holder
{
    position: relative;
}
.Phone, .OtherData
{
    position: absolute;
}
.Filler
{
    height: 100%;
    display: inline-block;
}