DaraW

Code is Poetry

制作列带有斑马条纹背景的表格

在切页面时,遇到了一个有趣的表格,如图所示:

下意识的想到了bootstrap的斑马纹效果table,然而记忆中bs只有行斑马纹效果,至于实现事实上很简单,直接去Github看最终生成的bootstrap.css文件,当前的2321~2323行为:

1
2
3
.table-striped > tbody > tr:nth-of-type(odd) {
background-color: #f9f9f9;
}

事实上这给了我一个很好的思路,借助nth-child()选择器,先对每行的奇数td设定背景,连起来就是奇数列做了特殊背景处理,也就是斑马纹效果,然后再对第一行和最后一行做特殊处理让边角圆润,下面贴上自己的代码(主要提供一个思路,css比较烂,请轻喷==):
html

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
<table class="account-course-lessons">
<tbody>
<tr>
<td><input type="checkbox"><a href="#">L1</a></td>
<td><input type="checkbox"><a href="#">L2</a></td>
<td><input type="checkbox"><a href="#">L3</a></td>
<td><input type="checkbox"><a href="#">L4</a></td>
</tr>
<tr>
<td><input type="checkbox"><a href="#">L5</a></td>
<td></td>
<td></td>
<td></td>
</tr>
<tr>
<td></td>
<td></td>
<td></td>
<td></td>
</tr>
<tr>
<td></td>
<td></td>
<td></td>
<td></td>
</tr>
<tr>
<td></td>
<td></td>
<td></td>
<td></td>
</tr>
</tbody>
</table>

scss

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
table.account-course-lessons {
width: 600px;
height: 300px;
margin: 1em;
background-color: rgb(221, 221, 221);
border-radius: 10px;
text-align: center;
text-decoration: underline;

tr {
td {
border-bottom: 2px solid rgb(215, 215, 215);
height: 60px;

a {
color: gray;
font-size: 1.5em;
margin: 0 1em;
}
}
}
tr {
td:nth-child(2n+1) {
background-color: rgb(235, 235, 235);
border-bottom: 2px solid rgb(215, 215, 215);
}
}
tr:nth-child(1) {
td:nth-child(2n+1) {
background-color: rgb(235, 235, 235);
border-top: 10px solid transparent;
border-left: 10px solid transparent;
border-right: 10px solid transparent;
border-radius: 20px 20px 0 0 ;
}
}
tr:nth-last-child(1) {
td:nth-child(2n+1) {
background-color: rgb(235, 235, 235);
border-bottom: 10px solid transparent;
border-left: 10px solid transparent;
border-right: 10px solid transparent;
border-radius: 0 0 20px 20px ;
}
td {
border-bottom: 0;
}
}
}

Proudly powered by Hexo and Theme by Hacker
© 2019 DaraW