表格是我们经常使用的标签，之前看到的有个很不错的小效果用css就可以实现，先放图
其实实现起来很简单
贴代码：
1 <!DOCTYPE html>
2 <html lang="en">
3 <head>
4 <meta charset="UTF-8">
5 <title>hover-table</title>
6 <style>
7
8 *{
9 margin:0;
10 padding:0;
11 box-sizing: border-box;
12 }
13 body {
14 font-family: Open Sans, sans-serif;
15 font-size: 13px;
16 margin: 20px;
17 text-align: center;
18 text-transform: uppercase;
19 color: #000;
20 background-color: #FFF;
21 }
22
23 h1 {
24 font-size: 21px;
25 margin: 1.5em 0;
26 }
27
28 table.highlight-table {
29 overflow: hidden;
30 width: auto;
31 max-width: 100%;
32 margin: 0 auto;
33 border-collapse: collapse;
34 border-spacing: 0;
35 }
36 table.highlight-table td,
37 table.highlight-table th {
38 padding: 10px;
39 position: relative;
40 outline: 0;
41 text-align: center;
42 border-bottom: 1px solid rgba(0, 0, 0, 0.1);
43 vertical-align: top;
44 }
45 table.highlight-table th {
46 font-weight: bold;
47 }
48 table.highlight-table thead th {
49 border-bottom-width: 2px;
50 }
51 table.highlight-table tbody th {
52 text-align: left;
53 white-space: nowrap;
54 }
55 table.highlight-table tbody > tr:hover td,
56 table.highlight-table tbody > tr:hover th {
57 background: #eef;
58 }
59
60 table.highlight-table td:hover:after,
61 table.highlight-table thead th:not(:empty):hover:after {
62 content: ‘‘;
63 position: absolute;
64 z-index: -1;
65 top: -5000px;
66 left: 0;
67 width: 100%;
68 height: 10000px;
69 background: #eef;
70 }
71 table.highlight-table td:hover{
72 background: #ccc !important;
73 }
74 pre{
75 width:60%;
76 margin:0 auto;
77 padding: 10px;
78 background: #ccc;
79 font-size: 20px;
80 font-family: ‘微软雅黑‘;
81 text-align: left;
82 text-transform: none;
83 }
84 </style>
85 </head>
86 <body>
87 <table class="highlight-table">
88 <thead>
89 <tr>
90 <th>name</th>
91 <th>age</th>
92 <th>sex</th>
93 <th>tel</th>
94 </tr>
95 </thead>
96 <tbody>
97 <tr>
98 <td>tom</td>
99 <td>12</td>
100 <td>boy</td>
101 <td>111</td>
102 </tr>
103 <tr>
104 <td>sandy</td>
105 <td>16</td>
106 <td>girl</td>
107 <td>112</td>
108 </tr>
109 <tr>
110 <td>donnad</td>
111 <td>14</td>
112 <td>boy</td>
113 <td>113</td>
114 </tr>
115 <tr>
116 <td>swif</td>
117 <td>15</td>
118 <td>boy</td>
119 <td>114</td>
120 </tr>
121 </tbody>
122 </table>
123 <hr>
124 <pre>
125 table.highlight-table tbody > tr:hover td,
126 table.highlight-table tbody > tr:hover th {
127 background: #eef;
128 }
129
130 table.highlight-table td:hover:after,
131 table.highlight-table thead th:not(:empty):hover:after {
132 content: ‘‘;
133 position: absolute;
134 z-index: -1;
135 top: -5000px;
136 left: 0;
137 width: 100%;
138 height: 10000px;
139 background: #eef;
140 }
141 table.highlight-table td:hover{
142 background: #ccc !important;
143 }
144 </pre>
145 </body>
146 </html>
主要起作用的代码是这一句
table.highlight-table td:hover:after,
table.highlight-table thead th:not(:empty):hover:after {
content: ‘‘;
position: absolute;
z-index: -1;
top: -5000px;
left: 0;
width: 100%;
height: 10000px;
background: #eef;
}
给每个单元格 行都position：relative之后使用after伪类绝对定位，高设成很大宽设为100%，层级要小于零，这样再加上背景色即实现啦。
时间： 2024-10-10 22:21:56