tableborder样式（html中border用法）

表格的默认样式不好看，设置border=&”1&″的时候,还会出现双边框，就像下面一样，直接上代码，看效果对比，而且用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;  }