在使用有border的table时发现设置圆角无效;经过万能的度娘后查到:当 border-collapse
的值为 collapse
时,border-radius
属性不会被应用到表格
因此只能换种方式实现;下边是scss代码
#display-func-tab {
border-collapse: separate;
border-spacing: 0;
th,
td {
height: 68px;
border: 1px solid #e4e4e4;
font-size: 14px;
}
thead {
tr {
height: 47px;
color: rgba(0, 0, 0, 0.6);
background: #f6f6f6;
text-align: center;
& > th:first-child {
border-top-left-radius: 10px;
border-bottom: 0;
border-right: 0;
}
& > th:last-child {
border-top-right-radius: 10px;
border-bottom: 0;
}
}
}
tbody {
tr {
td {
&:first-child {
border-right: 0;
text-align: center;
font-weight: 600;
color: #232427;
}
&:nth-child(2) {
text-indent: 50px;
color: #232427;
&.highlight-point {
position: relative;
&::before {
position: absolute;
left: -20px;
top: 50%;
transform: translateY(-50%);
content: "*";
color: #e92626;
font-weight: bold;
font-size: 20px;
}
}
}
}
&:nth-child(even) {
background: #fcfcfc;
}
&:last-child {
td:first-child {
border-bottom-left-radius: 10px;
}
td:last-child {
border-bottom-right-radius: 10px;
}
}
&:not(:last-child) {
td {
border-bottom: 0;
}
}
}
}
}
效果图