頁面結(jié)構(gòu)如下所示：
頁面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;}
最終效果
