tableborder样式 html中border用法

表的默认样式不好看。Set border = & # 82211″，会有双边框，就像下面这样，直接上代码，看效果对比，加上flex，就可以轻松实现文字的垂直居中。
1。修改前<table border="1"> <t

表的默认样式不好看。Set border = & # 82211″，会有双边框，就像下面这样，直接上代码，看效果对比，加上flex，就可以轻松实现文字的垂直居中。
1。修改前

<table border="1"> <tr> <td>班级</td> <td>姓名</td> <td>成绩</td> </tr> <tr> <td>一班</td> <td>小明</td> <td>90</td> </tr> <tr> <td>二班</td> <td>小红</td> <td>100</td> </tr> </table>

2。修改后

<table class="tab-box"> <tr> <td>班级</td> <td>姓名</td> <td>成绩</td> </tr> <tr> <td>一班</td> <td>小明</td> <td>90</td> </tr> <tr> <td>二班</td> <td>小红</td> <td>100</td> </tr> </table>// css.tab-box, .tab-box td{ border:1px solid #EBEEF5; border-collapse:collapse;/* 让边框合并，不让出现双边框*/ } .tab-box{ width: 100%; } .tab-box tr{ display: flex;/*flex布局*/ } .tab-box td { flex: 1;/*让每个单元格宽度一样*/ height:30px; padding-left:10px; display: flex;/*flex布局*/ align-items: center;/*让单元格文字垂直居中*/ color: #606266; }