Simple good-looking table borders style layout with flex

The default style table does not look good, time to set border = "1", the double border will appear, like the following, directly on the code to see the effect of contrast, and with flex, can easily realize the writing vertically.
1. before the amendment

<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. modified

<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, td{
  border:1px solid #EBEEF5;
   border-collapse:collapse;//让边框合并，不让出现双边框
 }
 .tab-box{
 	width: 100%;
 }
 .tab-box tr{
   display: flex;//flex布局
 }
 td {
   flex: 1;//让每个单元格宽度一样
   height:30px;
   padding-left:10px;
   display: flex;//flex布局
   align-items: center;//让单元格文字垂直居中
   color: #606266;
 }