Move the table mouse up to change the cell border color.

Keywords: PHP Attribute

Links to the original text: https://www.mk2048.com/blog/blog.php?id=bkkjhhkab&title=table+%E9%BC%A0%E6%A0%87%E7%A7%BB%E4%B8%8A%E5%8E%BB%E6%94%B9%E5%8F%98%E5%8D%95%E5%85%83%E6%A0%BC%E8%BE%B9%E6%A1%86%E9%A2%9C%E8%89%B2%E3%80%82

Table definition

border-collapse:collapse; the border is merged into a single border. The border-spacing and empty-cells attributes are ignored.

With td:hover, the display is incomplete

After searching for a long time, I didn't find a good way to use the left and right border is not perfect.

So I just want to add a pseudo-element after when I move it up, and locate it absolutely.

Definition and Usage

After pseudo-element adds content after the element.

This pseudo element allows the creator to insert the generated content at the end of the element content. By default, this pseudo element is an inline element, but you can change this using the attribute display.

Note: If specified! DOCTYPE, Internet Explorer 8 (and later) supports content attributes.

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>border-hover</title>
<style type="text/css">
.w1000{width:1000px;margin:0 auto;}
.table{width:100%;border-collapse:collapse;text-align:center;font-size:14px;}
.table tr th{border: 1px solid #d9dbda;padding:5px 0;}
.table tr td{border: 1px solid #d9dbda;}
.height2{height:61px;line-height:61px;}
.height1{height:30px;line-height:30px;}
.table tr td:hover .list-div{position:relative;}
.table tr td:hover .list-div:after{
    content: "";
    height: 100%;
    left: -1px;
    position: absolute;
    top: -1px;
    width: 100%;
    z-index: 100;
}
.table tr td.list01-td:hover .list-div:after{
    border: 1px solid #b1bac6;
}
.table tr td.list02-td:hover .list-div:after{
    border: 1px solid #76ca5a;
}
.table tr td.list03-td:hover .list-div:after{
    border: 1px solid #ff9600;
}
</style>
</head>
<body>
    <div class="w1000">
        <table class="table" cellpadding="0" cellspacing="0" >
            <thead>
                <tr>
                    <th>Monday</th>
                    <th>Tuesday</th>
                    <th>Wednesday</th>
                    <th>Thursday</th>
                    <th>Friday</th>
                    <th>Saturday</th>
                    <th>Sunday</th>
                </tr>
            </thead>
            <tbody>
                <tr>
                    <td rowspan="2" class="list01-td"><div class="list-div height2">week</div></td>
                    <td colspan="5" class="list02-td" ><div class="list-div height1">week</div></td>
                    <td></td>
                </tr>
                <tr>
                    <td class="list02-td"><div class="list-div height1">week</div></td>
                    <td colspan="4"></td>
                    <td></td>
                </tr>
                <tr>
                    <td colspan="3"></td>
                    <td colspan="2" class="list03-td"><div class="list-div height1">week</div></td>
                    <td colspan="2"></td>
                </tr>
            </tbody>
        </table>
    </div>
</body>
</html>

Show:

Reminder:

1. There is no merged column at the beginning of the work, and the simple point of the merged row does not need to be heightened.

Posted by mdell on Tue, 01 Oct 2019 23:39:19 -0700

Programmer Group

Move the table mouse up to change the cell border color.

Definition and Usage

Hot Keywords