table表格边框--黑色

页面结构如下所示:

页面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;}


最终效果


最后编辑于
©著作权归作者所有,转载或内容合作请联系作者
平台声明:文章内容(如有图片或视频亦包括在内)由作者上传并发布,文章内容仅代表作者本人观点,简书系信息发布平台,仅提供信息存储服务。

推荐阅读更多精彩内容

  • 1、垂直对齐 如果你用CSS,则你会有困惑:我该怎么垂直对齐容器中的元素?现在,利用CSS3的Transform,...
    kiddings阅读 3,229评论 0 11
  • 属于简易版,比较适合没有后台基础的初学者入门,使用Ajax响应php对mysql数据库进行操作,将网站搭建在xam...
    dovlie阅读 987评论 0 5
  • 和Android及IOS一样,在React Native中也有加载网页数据的控件WebView,常用的方法有: s...
  • 来到11月了!最近就是吃鸡!身体不舒服的吃鸡!工作不顺利的吃鸡!亏钱的吃鸡!身体不舒服好了到不好了!不多说了
    DeathKnightR阅读 133评论 0 0
  • 几天前第二次考科目二,自己一直紧张加上车况不好,再一次光荣的牺牲了。不,并不光荣,出了考场整个人都是恍惚的,就像有...
    ZXRLEMON阅读 275评论 0 0