如图所示发现;两个td始终无法垂直对齐 felx 都试了
结构如下
<table id="formCellPhone" class="tableColumn">
<tr>
<th>排行</th>
<th>手机号</th>
</tr>
<tr>
<td><img alt="活跃榜" src="~@/assets/img/images/a_6/1.png" /></td>
<td><p>18888888888</p></td>
</tr>
<tr>
<td><img alt="活跃榜" src="~@/assets/img/images/a_6/1.png" /></td>
<td><p>18888888888</p></td>
</tr>
<tr>
<td><img alt="活跃榜" src="~@/assets/img/images/a_6/1.png" /></td>
<td><p>18888888888</p></td>
</tr>
<tr>
<td><img alt="活跃榜" src="~@/assets/img/images/a_6/1.png" /></td>
<td><p>18888888888</p></td>
</tr>
<tr>
<td><img alt="活跃榜" src="~@/assets/img/images/a_6/1.png" /></td>
<td><p>18888888888</p></td>
</tr>
</table>
.table {
width: 100%;
border: 1px solid #ccc;
}
.table td {
padding: 10px;
}
table.tableColumn {
text-align: center;
font-size: 12px;
color: #fff;
width: 324px;
border-width: 1px;
border-color: transparent;
border-collapse: collapse;
}
table.tableColumn th {
color: #cbe5f3;
text-align: center;
font-size: 12px;
background-color: transparent;
border-width: 1px;
padding-top: 10px;
padding-left: 10px;
border-style: solid;
border-color: transparent;
}
table.tableColumn tr {
background-color: transparent;
}
table.tableColumn td {
border-width: 1px;
//padding: 8px;
border-style: solid;
border-color: transparent;
}
#formCellPhone td img {
vertical-align: bottom;
width: 18px;
}
#formCellPhone td p {
text-align: center;
padding-top: 10px;
color: #cbe5f3;
}