在開發(fā)網(wǎng)頁時,經(jīng)常會出現(xiàn)需要固定表格高度的情況。下面介紹兩種方法實現(xiàn)css固定表格高度。
第一種方法是使用css屬性overflow:hidden;,如下所示:
<table style="height:200px; overflow:hidden;"> <tbody> <tr> <td>1</td> <td>2</td> </tr> <tr> <td>3</td> <td>4</td> </tr> <tr> <td>5</td> <td>6</td> </tr> </tbody> </table>
使用該方法,需要注意以下幾點:
- 表格的父元素必須已經(jīng)有固定高度,否則此方法無法生效。
- 如果表格行數(shù)超過了固定的高度,那么超過的行將被隱藏,需要使用滾動條才能查看。
第二種方法是使用css屬性table-layout:fixed;,如下所示:
<table style="height:200px; table-layout:fixed;"> <tbody> <tr> <td>1</td> <td>2</td> </tr> <tr> <td>3</td> <td>4</td> </tr> <tr> <td>5</td> <td>6</td> </tr> </tbody> </table>
使用該方法,可以固定表格的高度,同時保證每行的高度相等。注意,此方法不會隱藏超出的行,需要使用滾動條查看。
綜上所述,使用以上兩種方法可以實現(xiàn)css固定表格高度。