我正在嘗試調整表格標題行的垂直對齊方式，但運氣不佳。它似乎卡在中間的默認垂直對齊方式上，我希望它底部對齊。問題的一部分是我想以一種方式格式化標題行，并以th不同的方式格式化第一列中的元素。我嘗試過vertical-align以各種方式和每個元素來調整屬性。該屬性似乎vertical-alignment適用于th和td元素，但不適用于thead元素。我錯過了什么嗎？table,td,th { border: 1px solid black;}table { border-collapse: collapse; width: 100%;}thead { line-height: 100px; border: 2px solid blue; vertical-align: bottom;}th { vertical-align: bottom;}td { height: 50px; vertical-align: bottom;}<table> <thead> <tr> <th>ID</th> <th>Name</th> <th>Amount</th> </tr> </thead> <tbody> <tr> <th>A1</th> <td>Albert</td> <td>100</td> </tr> <tr> <th>B2</th> <td>Bobby</td> <td>150</td> </tr> <tr> <th>C3</th> <td>Charlie</td> <td>300</td> </tr> </tbody></table>這就是我期望的輸出
1 回答
鴻蒙傳說
TA貢獻1865條經(jīng)驗 獲得超7個贊
嘗試這個：
table, td, th {
border: 1px solid black;
}
table {
border-collapse: collapse;
width: 100%;
}
thead {
border: 2px solid blue;
vertical-align: bottom;
}
th {vertical-align: bottom;}
thead th {
height: 100px;
}
td {
height: 50px;
vertical-align: bottom;
}
<table>
<thead>
<tr>
<th>ID</th>
<th>Name</th>
<th>Amount</th>
</tr>
</thead>
<tbody>
<tr>
<th>A1</th>
<td>Albert</td>
<td>100</td>
</tr>
<tr>
<th>B2</th>
<td>Bobby</td>
<td>150</td>
</tr>
<tr>
<th>C3</th>
<td>Charlie</td>
<td>300</td>
</tr>
</tbody>
</table>
- 1 回答
- 0 關注
- 118 瀏覽
添加回答
舉報
0/150
提交
取消