CSS制作圆角table--2019年9月6日

1.css制作圆角表格

    1.构建对应的table数据表

    2.css相应设置

示意图:

 

css代码:

实例

.main{
    width: 50%;
    margin: 15px auto;
    border: 1px solid black;
    border-radius: 20px;
    overflow: hidden;
    box-sizing: border-box;
}
.main table{
    border-collapse: collapse;
    text-align: center;
    width: 100%;
}
.main table caption{
    font-size: 30px;
    background-color: lightskyblue;
    color: white;
}

.main table thead{
    background-color: lightpink;
}

.main table tbody{
    background-color: lightblue;
}

.main table .foot{
    padding: 0 30px;
    text-align: left;
}
.main table tfoot{
    background-color: lightcoral;
}

.main tr, th, td{
    border-right: 1px solid black;
    height: 30px;
    border-top: 1px solid black;
}
.bor_R{
    border-right:none;
}

思路:

    1.border-collapse: collapse与border-radius  是相互冲突的,两者同时设置后者会失效

    2.既然两者不能同时设置,那么我们可以在table外面加一个div,在外部的div上面设置对应的border-radius圆角

    3.当这样设置后 需要对表格的边框线进行下设置  不然会出现边框线重叠

    4.我设置的是 上边框线 与右边框显示   然后将最右侧的td块的右边框清除,这样就实现了圆角表格