HTML表格可以在網頁中展示數據。但是,如果數據太多,用戶可能需要滾動頁面才能完整查看表格。為了方便瀏覽,可以設置表格高度自適應,使表格自動伸縮。
設置HTML表格高度自適應,需要將table標簽的height屬性設置為100%。同時,需要為table的父元素設置固定高度,例如設置div的高度為500px。
<div style="height: 500px;"> <table style="height: 100%;"> <tr> <th>姓名</th> <th>年齡</th> <th>性別</th> </tr> <tr> <td>小明</td> <td>20</td> <td>男</td> </tr> <tr> <td>小紅</td> <td>18</td> <td>女</td> </tr> </table> </div>
上面的代碼中,div的高度為500px,table的高度為100%。這樣,table的高度將自動根據父元素的高度進行調整,從而實現高度自適應。如果表格行數超過父元素高度,表格將出現滾動條。
需要注意的是,如果table的父元素沒有設置高度,table的height屬性設置為100%無效。此外,如果表格中含有多個tbody標簽,也需要將它們的高度設置為100%。
在實際開發中,可根據不同場景設置表格高度自適應,提高用戶體驗。