javascript - table单元格里这种提示效果用什么实现的

问题描述

问 题

想问下table单元格内这种如图这种效果是怎么实现的，（这种是类似悬浮的效果还是水印的效果）

解决方案

简单写了一点:
html:

<table border=1>
    <tr>
        <td>hello</td>
        <td class="tip warn">
              正常
            <span class="undiscuss">待处理</span>
        </td>
    </tr>
    <tr>
        <td>world</td>
        <td class="tip normal">
            异常
            <span class="discuss">已处理</span>
        </td>
    </tr>
</table>

css:

td{padding: 20px 60px}
.tip{position:relative}
.warn{color: red;}
.normal{color: green}
.undiscuss{position: absolute;right:0;top:0;padding:3px 5px;border:1px solid green;color:green
}
.discuss{position: absolute;right:0;top:0;padding:3px 5px;border:1px solid orange;color:orange
}

效果:

这篇关于javascript - table单元格里这种提示效果用什么实现的的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！