html：table如何固定首行
生活随笔
收集整理的這篇文章主要介紹了
html：table如何固定首行
小編覺得挺不錯(cuò)的,現(xiàn)在分享給大家,幫大家做個(gè)參考.
效果：固定首行，首行標(biāo)題信息不會(huì)隨滾動(dòng)條滾動(dòng)而消失。
主要使用css：【width】【overflow-y: auto】【display: table】【table-layout: fixed】
【width: calc(100% + 17px)】：設(shè)置于tbody，在table寬度的基礎(chǔ)上加17px用于展示滾動(dòng)條
【overflow-y: auto】：設(shè)置在tbody來顯示滾動(dòng)條
【display: table】：設(shè)置于tr，配合【width:100%】,來達(dá)到沾滿table
【table-layout: fixed】：使首行和內(nèi)容行對(duì)齊，使用這個(gè)的時(shí)候以上三個(gè)必須設(shè)置才能達(dá)到想要的效果
樸實(shí)無華的效果圖：
CSS：
<style type="text/css"><!-- 清除margin和padding -->* {margin: 0;padding: 0;}table {/* 設(shè)置表格合并邊框 */border-collapse: collapse;/* 將表格在畫面中水平具中 */margin: 100px auto;/* 設(shè)置表格寬度 */width: 500px;/* 設(shè)置表格底部邊框 */border-bottom: 1px solid black;}tbody {/* 設(shè)置tbody為行級(jí)塊元素或塊元素 */display: inline-block;/* 設(shè)置顯示高度 */height: 240px;/* 17px為默認(rèn)滾動(dòng)條寬度 */width: calc(100% + 17px);/* 隱藏水平溢出內(nèi)容 */overflow-x: hidden;/* 當(dāng)垂直內(nèi)容超出顯示高度時(shí)以滾動(dòng)條形式展示 */overflow-y: auto;}tr {/* 將tr設(shè)置為table元素,以此達(dá)到內(nèi)容沾滿table的效果 */display: table;/* 將tr寬度設(shè)置為100%,以此達(dá)到內(nèi)容沾滿table的效果 */width: 100%;/* 設(shè)置table-layout為fixed以達(dá)到首行和內(nèi)容行對(duì)其的效果 */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>總結(jié)
以上是生活随笔為你收集整理的html：table如何固定首行的全部內(nèi)容，希望文章能夠幫你解決所遇到的問題。
- 上一篇： Geoserver
- 下一篇： 软件工程专硕，报考人数翻倍！杭州师范大学