(相關資料圖)

表格的默認樣式不好看，設置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;  }

關鍵詞：