1.开发环境 vue+vant
2.电脑系统 windows10专业版
3.在开发的过程中,我们经常会使用到表格组件,但是我们会发现在vant中没有表格组件,这个时候我们可以选择自己手写一个table或者是使用插件,在这里我选择的是手写table,下面我来分享一下如何给table添加边框,希望对你有所帮助。
4.在template中添加如下代码:
18-12-2020 10:20:34.311 | 102034311 | Any Mille |
18-12-2020 10:20:34.311 | 102034311 | Any Mille |
18-12-2020 10:20:34.311 | 102034311 | Any Mille |
5.在css中添加如下代码:.ruletable{
width: 100%;
border-collapse: collapse; // 主要代码
}
.ruletable th{
text-align: center;
}
.ruletable tr:nth-of-type(1){
border-top: 1px solid #FFDCDF; // 添加边框
}
.ruletable tr{
border-bottom: 1px solid #FFDCDF; // 添加边框
}
6.效果图如下:
7.本期的分享到了这里就结束啦,是不是很nice,希望对你有所帮助,让我们一起努力走向巅峰。