[CSS] CSS如何固定表格高度－Harry

最近在製作新版網頁的過程中
遇到了一個小問題
也可以說是我無知..
所以針對這個困難花了不少時間尋找解答
在此特分享給同樣問題的朋友
當我們在製作表格或是使用

標籤的時候
常常會遇到一個問題
就是表格的高度
會隨著內容增加而改變
比如說
假設表格設定高度為100px
但表格內容的長度卻長達200px
於是乎
表格的高度就會被內容拉長到200px
原本的寫法如下:

這裡是表格內容(內容在此省略)

這時候如果固執的你
又硬是想要把表格高度給固定住
不想要讓高度隨著內容改變
我們就可以使用CSS語法中的其中一個標籤 "overflow"
該標籤屬於CSS樣式語法

所以我們不能將overflow寫到一般的html語法之中
錯誤示範如下:

overflow="hidden">

表格內容

所以在使用時
可以使用

來包住表格的內容
再將div的屬性設定
使用style來加以定義
範例如下:

這裡是表格內容(內容在此省略)

如此一來
當內文高度超過

所設定的高度時
超過的部份就不會被顯示出來(hidden)
另外加上補充
overflow除了有hidden的屬性之外
另外還有三個屬性
包含:

overflow:visible (預設值,高度隨內容變化)
overflow:auto (自動,在必須時內容才會被裁切或是顯示捲軸)
overflow:scroll (卷軸,在內容高度超過設定高度時顯示捲軸)