html和js相关

最新推荐文章于 2024-05-03 14:55:36 发布

北冥的喵喵

最新推荐文章于 2024-05-03 14:55:36 发布

阅读量63

点赞数

分类专栏：笔记玩转代码文章标签： html javascript css

本文链接：https://blog.csdn.net/u013082364/article/details/129189278

版权

笔记同时被 2 个专栏收录

7 篇文章 0 订阅

订阅专栏

玩转代码

2 篇文章 0 订阅

订阅专栏

1，table 固定表头的方法
方法一：

	.table-container {
  width: 100%;
  height: 100%;
  overflow: auto;
}
/* 首列固定 */
.table-container thead tr > th:first-child,
.table-container tbody tr > td:first-child {
  position: sticky;
  left: 0;
  z-index: 1;
}
/* 表头固定 */
.table-container thead tr > th {
  position: sticky;
  top: 0;
  z-index: 2;
} 
/* 表头首列强制最顶层 */
.table-container thead tr > th:first-child {
  z-index: 3;
}

方法二：

table tbody {
	display: block;
	height: 450px;
	overflow-y: scroll;
} 
table thead, tbody tr {
	display: table;
	width: 100%;
	table-layout: fixed;
} 
table thead {
	width: calc(100% - 1em)
}

方法三：

<html>
<head>
    <title>表頭固定</title>
</head>
<style>
        .table-head{padding-right:17px;background-color:#999;color:#000;}
        .table-body{width:100%;height: 80px;overflow-y: scroll;}
        .table-head table,.table-body table{width:100%}
        .table-body table tr:nth-child(2n+1){background-color: #f2f2f2;}
</style>
<body>
    <div style="width:100%;" id="aa">
        <div class="table-head">
            <table>
                <thead>
                    <tr>
                        <th colspan="2">序號</th>
                        <th colspan="2">內容</th>
                    </tr>
                    <tr>
                        <th id="h_1">序號1</th>
                        <th>序號2</th>
                        <th>內容1</th>
                        <th>內容2</th>
                    </tr>
                </thead>
            </table>
        </div>
        <div class="table-body">
            <table>
                <tbody>
                    <tr><td id ="b_1">ceshi</td><td>ceshi</td><td>ceshi</td><td>ceshi</td></tr>
                    <tr><td>1</td><td>2</td><td>ceshi1</td><td>ceshi2</td></tr>
                    <tr><td>1</td><td>2</td><td>ceshi1</td><td>ceshi2</td></tr>
                    <tr><td>1</td><td>2</td><td>ceshi1</td><td>ceshi2</td></tr>
                    <tr><td>1</td><td>2</td><td>ceshi1</td><td>ceshi2</td></tr>              
                </tbody>
            </table>
        </div>
    </div>
</body>
<script>
  var head_list=["h1","h2"];
  var dictable={h1:"b1", h2"b2"};
  for (i=0;i<head_list.length;i++){
	var sub_x=document.getElementById(dictable[head_list[i]]);
	var wid_y=getComputedStyle(sub_x).width;
	document.getElementById(head_list[i]).style=parseInt(wid_y) + 10 + "px";
}
clickshow=function(id){
	var x = document.getElementById(id);
	var class_a = x.getAttribute("class");
	x.setAttribute("class","new_style_class");
}
</script>
</html>