html：table如何固定首行
生活随笔
收集整理的這篇文章主要介紹了
html：table如何固定首行
小編覺得挺不錯的,現在分享給大家,幫大家做個參考.
效果：固定首行，首行標題信息不會隨滾動條滾動而消失。
主要使用css：【width】【overflow-y: auto】【display: table】【table-layout: fixed】
【width: calc(100% + 17px)】：設置于tbody，在table寬度的基礎上加17px用于展示滾動條
【overflow-y: auto】：設置在tbody來顯示滾動條
【display: table】：設置于tr，配合【width:100%】,來達到沾滿table
【table-layout: fixed】：使首行和內容行對齊，使用這個的時候以上三個必須設置才能達到想要的效果
樸實無華的效果圖：
CSS：
<style type="text/css"><!-- 清除margin和padding -->* {margin: 0;padding: 0;}table {/* 設置表格合并邊框 */border-collapse: collapse;/* 將表格在畫面中水平具中 */margin: 100px auto;/* 設置表格寬度 */width: 500px;/* 設置表格底部邊框 */border-bottom: 1px solid black;}tbody {/* 設置tbody為行級塊元素或塊元素 */display: inline-block;/* 設置顯示高度 */height: 240px;/* 17px為默認滾動條寬度 */width: calc(100% + 17px);/* 隱藏水平溢出內容 */overflow-x: hidden;/* 當垂直內容超出顯示高度時以滾動條形式展示 */overflow-y: auto;}tr {/* 將tr設置為table元素,以此達到內容沾滿table的效果 */display: table;/* 將tr寬度設置為100%,以此達到內容沾滿table的效果 */width: 100%;/* 設置table-layout為fixed以達到首行和內容行對其的效果 */table-layout: fixed;}td {border: 1px solid black;height: 80px;/* 文字水平垂直居中 */text-align: center;line-height: 80px;}</style>HTML：
<body><table><thead><tr><td>No</td><td>姓名</td><td>年齡</td><td>性別</td><td>電話</td></tr></thead><tbody><tr><td>1</td><td>趙</td><td>20</td><td>男</td><td>123456</td></tr><tr><td>2</td><td>錢</td><td>20</td><td>男</td><td>123456</td></tr><tr><td>3</td><td>孫</td><td>20</td><td>男</td><td>123456</td></tr><tr><td>4</td><td>李</td><td>20</td><td>男</td><td>123456</td></tr><tr><td>5</td><td>周</td><td>20</td><td>男</td><td>123456</td></tr><tr><td>6</td><td>張三</td><td>20</td><td>男</td><td>123456</td></tr><tr><td>7</td><td>李四</td><td>21</td><td>男</td><td>654321</td></tr></tbody></table> </body>總結
以上是生活随笔為你收集整理的html：table如何固定首行的全部內容，希望文章能夠幫你解決所遇到的問題。
- 上一篇： Geoserver
- 下一篇： 软件工程专硕，报考人数翻倍！杭州师范大学