首頁(yè) 猿問(wèn) table單元格里這種提示效果用什...

table單元格里這種提示效果用什么實(shí)現(xiàn)的

JavaScript

阿晨1998 2018-10-19 13:18:09

想問(wèn)下table單元格內(nèi)這種如圖這種效果是怎么實(shí)現(xiàn)的，（這種是類似懸浮的效果還是水印的效果）

查看完整描述

1 回答

婷婷同學(xué)_

TA貢獻(xiàn)1844條經(jīng)驗(yàn) 獲得超8個(gè)贊

簡(jiǎn)單寫(xiě)了一點(diǎn):
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
}

效果: