• <noscript id="e0iig"><kbd id="e0iig"></kbd></noscript>
  • <td id="e0iig"></td>
  • <option id="e0iig"></option>
  • <noscript id="e0iig"><source id="e0iig"></source></noscript>
  • 前端-表頭固定,內容滾動

    原理: 利用兩個table,一個div包裝一個table表頭,一個div包裝一個table的body


    <!DOCTYPE html>
    <html>
    	<head>
    		<meta charset="UTF-8">
    		<title></title>
    		<script type="text/javascript" src="js/jquery-3.2.1.js" ></script>
    		<script type="text/javascript" src="asset/bootstrap-3.3.5-dist/js/bootstrap.min.js" ></script>
    		<link rel="stylesheet" href="asset/bootstrap-3.3.5-dist/css/bootstrap.min.css" />
    		<style>
    			#div-table-wrapper {
    				width: 500px;
    				margin-top: 50px;
    				margin-left: 200px;
    				margin-bottom: 100px;
    			}
    			
    			.table-head-wrapper {
    				/*//設置第一個table-wrapper中height,不然overflow-y:auto;不起作用*/
    				height: 50px;  
    				width: 100%;
    			}
    			
    			.table-body-wrapper {
    				margin-top: -11px;
    				/*//設置第二個table-wrapperheight*/
    				height: 200px;  
    				/*//設置垂直滾動條*/
    				overflow-y: auto; 
    				overflow-x: hidden;
    				border-bottom: 1px solid #ddd;
    				border-left: 1px solid #ddd;
    				border-right: 1px solid #ddd;
    			}
    			
    			#btn-wrapper {
    				margin-left: 200px;
    				margin-top: -85px;
    			}
    			
    		</style>
    		
    		<script type="text/javascript">
    			$(function(){
    				$("#btn-add").click(function(){
    					$("#tbody-content").append("<tr><td>小貝</td><td>23</td></tr>");
    						var $tableHeadWrapper = $(".table-head-wrapper");
    						var $tableBodyWrapper = $(".table-body-wrapper");
    						var $tableBody = $("#table-body");
    						
    						//獲取第二個table設置的高度
    						var tableBodyWrapperHeight = $tableBodyWrapper.height();  
    						//table的實際高度(里面有動態數據,高度隨著數據添加而)
    						var tableBodyHeight = $tableBody.height();  
    						
    						if(tableBodyHeight >= tableBodyWrapperHeight){
    							$tableHeadWrapper.css({"overflow-y": "auto"});
    						}else{
    							$tableHeadWrapper.css({"overflow-y":"hidden"});
    						}
    					})
    			});
    		</script>
    	</head>
    	<body>
    		<div id="div-table-wrapper">
    			<div class="table-head-wrapper" >
    				<table class="table table-bordered">
    					<colgroup>
    						<col width="50%" />
    						<col width="50%" />
    					</colgroup>
    					<thead>
    						<tr>
    							<td>姓名</td>
    							<td>年齡</td>
    						</tr>
    					</thead>
    					
    				</table>
    			</div>
    			<div class="table-body-wrapper">
    				<table class="table table-bordered" id="table-body" >
    					<colgroup>
    						<col width="50%" />
    						<col width="50%" />
    					</colgroup>
    					<tbody id="tbody-content">
    						<tr><td>小貝</td><td>23</td></tr>
    						<tr><td>小貝</td><td>23</td></tr>
    					</tbody>
    				</table>
    			</div>
    		</div>
    		<div id="btn-wrapper">
    			<input id="btn-add" type="button" class="btn btn-primary" value="增加一行" />
    		</div>
    	</body>
    </html>
    

    效果圖:



    版權聲明:本文為u013887008原創文章,遵循 CC 4.0 BY-SA 版權協議,轉載請附上原文出處鏈接和本聲明。
    本文鏈接:https://blog.csdn.net/u013887008/article/details/73142554

    智能推薦

    JS(JQ)實現table表格固定表頭且表頭可以隨橫向滾動而滾動

    先看一張效果圖 思路: 1、頭部用一個table并用一個div包裹著, 表格的具體內容用一個table 2、頭部外面的div用positon: relative相對定位 3、獲取整個表格的高度 4、獲取表格的dom(或者包裹著表格的dom)距離頁面頂部的距離 offsetTop 5、滾動的零界點的距離 表格的高度+表格距離頁面頂部的距離 如果滾動超過這個 就讓頭部的top值歸0或原封不動 當然還有...

    Flutter入門:Table 橫向滾動+固定表頭/固定第一列實現

    先上實現圖: 代碼: 實現思路:Row內嵌套橫向Scrollview,表頭單獨處理....

    js實現表頭不動,表格內容無限循環滾動

    表頭不動,只有內容無限循環滾動,代碼如下: html部分: css部分: js部分:...

    猜你喜歡

    HTML實現左側內容可滾動,右側列表固定布局

    一、前言:最近在項目中,遇到一個頁面布局問題,說是布局,其實就是實現一個新聞頁面的交互問題;功能比較常見,就是左側的內容部分可以滾動,右側的列表固定定位。這個功能比較常見,目前已實現,就是布局+JS配合實現該效果;先上圖,大概就是下圖右側列表隨滾動條固定在右側,左側可以滾動的效果,當滾動條接近底部時,為了使右側列表不覆蓋底部,需要用js處理,設置右側列表的bottom值,具體請看代碼。 二, 代碼...

    數組刪除其中某個對象的方法

    數組刪除其中的對象或元素,在前端是比較常見的需求。 我現在比較常用的方法如下: 這種方法只適合刪除具有唯一標識的對象。 有沒有想要脫單的小伙伴,加入我們的脫單星球,認識更多優秀的小哥哥小姐姐 特此聲明,星球是免費的,但是創建星球的時候說是必須輸入金額,所以只能先私聊,我再加你免費加入!...

    圖床搭建以及圖床工具的使用

    為什么要用圖床和圖床工具? 比較下面三種md中的圖片url地址(均免費),你會使用哪一種? 選1?由于是本地路徑,文檔分享后給其他人打開后很可能顯示圖片加載失敗。 選2?雖然分享后可以顯示圖片,但能保證加載速度? 選3?我肯定選這種,即兼容2的瀏覽器訪問,又能保證訪問速度。 這樣就可以回答上面的問題了!保證瀏覽器訪問要用圖床,保證加載速度要用圖床工具,又不花錢想想就開心。 除此之外本篇博客還會講解...

    并發編程理論篇

    一、必備知識回顧 計算機又叫電腦,即通電的大腦,發明計算機是為了讓他通電之后能夠像人一樣去工作,并且它比人的工作效率更高,因為可以24小時不間斷 計算機五大組成部分 控制器 運算器 存儲器 輸入設備 輸出設備 計算機的核心真正干活的是CPU(控制器+運算器=中央處理器) 程序要想被計算機運行,它的代碼必須要先由硬盤讀到內存,之后cpu取指再執行 并發 看起來像同時運行的就可以稱之為并發 并行 真正...

    Java LinkedHashMap

    Java LinkedHashMap 前言 Map是我們在實際使用過程中常用的集合,HashMap在Java的實際開發中出鏡率很高,它通過hash算法實現了高效的非線程安全的集合,它有一個缺點就是,用戶插入集合的數據時無序,在我們需要一些有序的map的時候,我們就需要引入另外一個集合:LinkedHashMap。 LinkedHashMap是一個有序的非線程安全的集合,它是HashMap的子類,基...

    精品国产乱码久久久久久蜜桃不卡