html中table遮罩一行
最近接到这样一个需求,要求在table表中按照一定规则给一行加上遮罩层,防止用户输入
因为是采用模板引擎加载的情况,所以可以直接采用css的样式处理,本来最开始打算tr中放div的,但是没想到直接飘出来了…所以后来直接使用td加上绝对定位即可实现
代码如下:
<html> <head> <meta charset='utf8' /> <title>测试</title> </head> <style> .mask { position: absolute; background-color: rgba(0, 0, 0, 0.8);; height: 25px; width: 200px; left: 0; color: white; } </style> <body> <table> <tr> <th>abas</th> <th>abasSDF</th> <th>abasAAA</th> </tr> <tr> <td>sdfasdf</td> <td>sdfasdf</td> <td>sdfasdf</td> <td class="mask">遮罩层</td> </tr> <tr> <td>absd</td> <td>asf</td> <td>werwr</td> </tr> <tr> <td>absd</td> <td>asf</td> <td>werwr</td> <td class="mask">遮罩层</td> </tr> </table> </body> </html>
核心代码在于 mask这个样式,采用绝对于tr的定位,便可实现遮罩一行的效果