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表格,使用戶能夠更加方便地閱讀大量數據。
下一篇java長度和容量