色婷婷狠狠18禁久久YY,CHINESE性内射高清国产,国产女人18毛片水真多1,国产AV在线观看

css表格設置固定高度自適應

許立華1年前6瀏覽0評論

CSS表格是網頁排版中常用的元素之一,可以用來展示大量數據。然而,在展示大量數據時,表格往往會超出頁面的高度,給用戶的閱讀帶來不便。下面介紹一種設置CSS表格固定高度自適應的方法。

table{
height: 200px; /*固定高度*/
width: 100%; /*寬度100%*/
table-layout: fixed;
border-collapse: collapse;
}
thead{
display: table;
width: 100%;
table-layout: fixed;
height: 20px; /*固定表頭高度*/
}
tbody{
display: block;
width: calc(100% - 0.6em); /*滾動條寬度*/
overflow-y: scroll; /*Y軸方向滾動*/
height: calc(100% - 20px); /*計算剩余高度*/
}
tr{
display: table;
width: 100%;
table-layout: fixed;
}
td{
word-wrap: break-word;
overflow-wrap: break-word;
word-break: break-word;
}
::-webkit-scrollbar{
height: 0.6em; /*滾動條寬度*/
}
::-webkit-scrollbar-track{
background-color: #f5f5f5;
}
::-webkit-scrollbar-thumb{
background-color: #ccc;
}

上述代碼設置了表格的固定高度為200px,寬度為100%,同時設置了表頭的高度為20px。通過設置tbody的max-height屬性,使表格可以自適應瀏覽器的寬度,同時也可以根據表格的內容自動調整高度。

為了使表格的滾動條更加美觀,我們可以通過CSS偽類選擇器來設置滾動條的樣式。

通過使用上述代碼,我們可以創建一個高度固定自適應的CSS表格,使用戶能夠更加方便地閱讀大量數據。