html中table遮罩一行

2019年3月15日 0 作者 筱枫

最近接到这样一个需求,要求在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的定位,便可实现遮罩一行的效果