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

https://img1.mukewang.com/5bdbb5960001ba1b09520169.jpg

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

阿晨1998
浏览 450回答 1
1回答

婷婷同学_

简单写了一点:html:<table&nbsp;border=1> &nbsp;&nbsp;&nbsp;&nbsp;<tr> &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;<td>hello</td> &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;<td&nbsp;class="tip&nbsp;warn"> &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;正常&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;<span&nbsp;class="undiscuss">待处理</span> &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;</td> &nbsp;&nbsp;&nbsp;&nbsp;</tr> &nbsp;&nbsp;&nbsp;&nbsp;<tr> &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;<td>world</td> &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;<td&nbsp;class="tip&nbsp;normal"> &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;异常&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;<span&nbsp;class="discuss">已处理</span> &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;</td> &nbsp;&nbsp;&nbsp;&nbsp;</tr></table>css:td{padding:&nbsp;20px&nbsp;60px}.tip{position:relative}.warn{color:&nbsp;red;}.normal{color:&nbsp;green}.undiscuss{position:&nbsp; absolute;right:0;top:0;padding:3px&nbsp;5px;border:1px&nbsp;solid&nbsp;green;color:green }.discuss{position:&nbsp;absolute;right:0;top:0;padding:3px&nbsp;5px;border:1px&nbsp;solid&nbsp;orange;color:orange }效果:
打开App,查看更多内容
随时随地看视频慕课网APP

相关分类

JavaScript