js 实现 table 固定表头

最新推荐文章于 2024-04-01 18:32:05 发布

1°叁柒

最新推荐文章于 2024-04-01 18:32:05 发布

阅读量7.6k

点赞数

分类专栏： js table 文章标签： js table 固定表头

本文链接：https://blog.csdn.net/zhu_nana/article/details/50668482

版权

js 同时被 2 个专栏收录

41 篇文章 0 订阅

订阅专栏

table

8 篇文章 0 订阅

订阅专栏

<!doctype html public "-//w3c//dtd html 4.0 transitional//en">
<html>
<head>
<title>固定表头</title>
</head>
<style>
#box{
height:214px;
width:500px;
overflow-y:auto;/** 必须，否则当表格数据过多时，不会产生滚动条，而是自动延长该div的高度 */
position:relative;/** 必须，若不设置，拷贝得来的表头将相对于其设置该属性为该值的父节点（或间接父节点）定位，如果没有，则相对于body */
}
table,tr,td,th{
border:1px solid #ccd;
border-collapse:collapse;
}
table{
width:100%;
}
td{
height:24px;
width:50px;/** 固定单元格宽度，防止分离表头后，表头与数据行错位（缺点） */
line-height:24px;
padding:3px 5px;
background-color:#ddd;
word-break:break-all;/** 设置当文本过长时换行 */

}

th{
height:24px;
width:50px;/** 不管是固定像素或是百分比，应与对应数据列的宽度一致 */
line-height:24px;
background-color:#cfc;
}
</style>
<SCRIPT LANGUAGE="JavaScript">

</SCRIPT>
<body>
<div id="box">
<table id="tab">
<tr><th>序号</th><th>姓名</th><th>性别</th><th>年龄</th><th>户籍</th><th>身份</th></tr>
<tr><td>1</td><td>唐三藏</td><td>男</td><td>30</td><td>长安</td><td>佛</td></tr>
<tr><td>2</td><td>孙悟空</td><td>男</td><td>1000</td><td>花果山</td><td>佛</td></tr>
<tr><td>3</td><td>猪悟能</td><td>男</td><td>700</td><td>高老庄</td><td>使者</td></tr>
<tr><td>4</td><td>沙悟净</td><td>男</td><td>680</td><td>流沙河</td><td>罗汉</td></tr>
<tr><td>5</td><td>观世音</td><td>不详</td><td>10000</td><td>珞珈山</td><td>尊者</td></tr>
<tr><td>6</td><td>玉皇大帝</td><td>男</td><td>1000000</td><td>凌霄殿</td><td>皇帝</td></tr>
<tr><td>7</td><td>太上老君</td><td>男</td><td>8000</td><td>离恨天</td><td>道尊</td></tr>
<tr><td>8</td><td>哪吒</td><td>男</td><td>570</td><td>陈塘关</td><td>神</td></tr>
<tr><td>9</td><td>女儿国国王</td><td>女</td><td>28</td><td>女儿国</td><td>皇帝</td></tr>
<tr><td>10</td><td>白骨精</td><td>女</td><td>790</td><td>白骨洞</td><td>妖</td></tr>
<tr><td>11</td><td>地藏王</td><td>男</td><td>80000</td><td>幽冥界</td><td>菩萨</td></tr>
<tr><td>12</td><td>嫦娥</td><td>nv</td><td>3000</td><td>广寒宫</td><td>仙</td></tr>
<tr><td>13</td><td>唐三藏</td><td>男</td><td>30</td><td>长安</td><td>佛</td></tr>
<tr><td>14</td><td>孙悟空</td><td>男</td><td>1000</td><td>花果山</td><td>佛</td></tr>
<tr><td>15</td><td>猪悟能</td><td>男</td><td>700</td><td>高老庄</td><td>使者</td></tr>
<tr><td>16</td><td>沙悟净</td><td>男</td><td>680</td><td>流沙河</td><td>罗汉</td></tr>
<tr><td>17</td><td>观世音</td><td>不详</td><td>10000</td><td>珞珈山</td><td>尊者</td></tr>
<tr><td>18</td><td>玉皇大帝</td><td>男</td><td>1000000</td><td>凌霄殿</td><td>皇帝</td></tr>
<tr><td>19</td><td>太上老君</td><td>男</td><td>8000</td><td>离恨天</td><td>道尊</td></tr>
<tr><td>20</td><td>哪吒</td><td>男</td><td>570</td><td>陈塘关</td><td>神</td></tr>
<tr><td>21</td><td>女儿国国王</td><td>女</td><td>28</td><td>女儿国</td><td>皇帝</td></tr>
<tr><td>22</td><td>白骨精</td><td>女</td><td>790</td><td>白骨洞</td><td>妖</td></tr>
<tr><td>23</td><td>地藏王</td><td>男</td><td>80000</td><td>幽冥界</td><td>菩萨</td></tr>
<tr><td>24</td><td>嫦娥</td><td>nv</td><td>3000</td><td>广寒宫</td><td>仙</td></tr>
</table>
</div>
</body>
</html>

1°叁柒

关注

0
点赞
踩
5

收藏

觉得还不错? 一键收藏
1
评论
js 实现 table 固定表头

固定表头 #box{ height:214px; width:500px; overflow-y:auto;/** 必须，否则当表格数据过多时，不会产生滚动条，而是自动延长该div的高度 */ position:relative;/** 必须，若不设置，拷贝得来的表头将相对于其设置
复制链接

扫一扫