表格的默認樣式不好看，設置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;
}
原創文章，作者：投稿專員，如若轉載，請註明出處：https://www.506064.com/zh-hant/n/273042.html
微信掃一掃 
支付寶掃一掃 