table表格边框--黑色

页面结构如下所示:

table表格边框--黑色_第1张图片

页面css

.GFtable1{clear: both;width: 86%;margin-left: 7%;margin-right: 7%;height: 3.32rem;margin-bottom: 0.2rem;color: #fff;}

.GFtable1 table{width: 100%;height: 100%;overflow: hidden;border-collapse: collapse;border: none;}

.GFtable1 tr{}

.GFtable1 th{font-size:0.24rem;color:#fff;text-align:center;}

.GFtable1 td{font-size:0.24rem;color:#fff;text-align:center;border: 1px solid #279ed0;}

.GFtable1 td:nth-child(1){text-align:right;width:0.6rem;}

.GFtable1 tr:nth-child(1){background-color:#1ba4dd;}

.GFtable1 tr:nth-child(2){background-color:#38b7ec;}

.GFtable1 tr:nth-child(3){background-color:#5ed0ff;}

.GFtable1 tr:nth-child(4){background-color:#38b7ec;}

.GFtable1 tr:nth-child(5){background-color:#5ed0ff;}

.GFtable table{width:100%;height:100%;border-color: #279ed0;}

.GFtable tr{}

.GFtable th{font-size:0.24rem;color:#fff;text-align:center;}

.GFtable td{font-size:0.24rem;color:#fff;text-align:center;}

.GFtable td:nth-child(1){text-align:right;width:0.6rem;}

.GFtable tr:nth-child(1){background-color:#1ba4dd;}

.GFtable tr:nth-child(2){background-color:#38b7ec;}

.GFtable tr:nth-child(3){background-color:#5ed0ff;}

.GFtable tr:nth-child(4){background-color:#38b7ec;}

.GFtable tr:nth-child(5){background-color:#5ed0ff;}


最终效果


table表格边框--黑色_第2张图片

你可能感兴趣的:(table表格边框--黑色)