Warning: error_log(/data/www/wwwroot/hmttv.cn/caches/error_log.php): failed to open stream: Permission denied in /data/www/wwwroot/hmttv.cn/phpcms/libs/functions/global.func.php on line 537 Warning: error_log(/data/www/wwwroot/hmttv.cn/caches/error_log.php): failed to open stream: Permission denied in /data/www/wwwroot/hmttv.cn/phpcms/libs/functions/global.func.php on line 537 亚洲精品免费视频,亚洲精品日韩专区在线观看,久久久91精品国产一区二区 

      

        

          



          
	
          
		
          
			
			
          
				
          整合營銷服務(wù)商
          
				
          電腦端+手機(jī)端+微信端=數(shù)據(jù)同步管理
          
			
          
			
          				
				
          免費(fèi)咨詢熱線：
          			
			
          
		
          
	
          
		
	
	
	

          


          
	

          

 

          
  
          
    
          
      
          
        
          html表格實(shí)現(xiàn)固定table的表頭和第一列內(nèi)容
          
        
           
          
	
	
          
		
                        
          頁中實(shí)現(xiàn)像表格文檔那樣固定table的表頭和第一列內(nèi)容，類似于excel表格那樣！下面說說實(shí)現(xiàn)方法
          效果如下：
          在數(shù)據(jù)眾多的列表下，規(guī)定的區(qū)域內(nèi)上下左右都可以滾動查看，然而表頭和側(cè)邊表頭都還在，方便用戶查看數(shù)據(jù)，增強(qiáng)用戶體驗(yàn)！
          實(shí)現(xiàn)代碼
          html結(jié)構(gòu)：
          css代碼：
          javascript代碼：
          擊“了解更多”獲取Kendo UI for jQuery R1 2020 SP1試用版下載
          Kendo UI目前最新提供Kendo UI for jQuery、Kendo UI for Angular、Kendo UI Support for React和Kendo UI Support for Vue四個控件。Kendo UI for jQuery是創(chuàng)建現(xiàn)代Web應(yīng)用程序的最完整UI庫。
          鎖定（凍結(jié)）列使您可以在用戶水平滾動網(wǎng)格時始終顯示特定列。
          有關(guān)可運(yùn)行的示例，可參閱有關(guān)在Grid中實(shí)現(xiàn)鎖定列的演示。
          <!DOCTYPE html>
<html>
<head>
<title></title>
<link rel="stylesheet" href="styles/kendo.common.min.css" />
<link rel="stylesheet" href="styles/kendo.default.min.css" />
<link rel="stylesheet" href="styles/kendo.default.mobile.min.css" />

<script src="js/jquery.min.js"></script>


<script src="js/kendo.all.min.js"></script>

</head>
<body>
<div id="example">
<div id="grid"></div>

<script>
$(document).ready(function() {
$("#grid").kendoGrid({
dataSource: {
type: "odata",
transport: {
read: "https://demos.telerik.com/kendo-ui/service/Northwind.svc/Orders"
},
schema: {
model: {
fields: {
OrderID: { type: "number" },
ShipCountry: { type: "string" },
ShipName: { type: "string" },
ShipCity: { type: "string" },
ShipAddress: { type: "string" }
}
}
},
pageSize: 30
},
height: 540,
sortable: true,
reorderable: true,
groupable: true,
resizable: true,
filterable: true,
columnMenu: true,
pageable: true,
columns: [ {
field: "OrderID",
title: "Order ID",
locked: true,
lockable: false,
width: 150
}, {
field: "ShipCountry",
title: "Ship Country",
width: 300
}, {
field: "ShipCity",
title: "Ship City",
width: 300
},{
field: "ShipName",
title: "Ship Name",
locked: true,
width: 300
}, {
field: "ShipAddress",
lockable: false,
width: 400
}
]
});
});
</script>
</div>

</body>
</html>

          為了使該功能正常運(yùn)行，必須提供以下配置設(shè)置。 它們確保至少一個非鎖定列始終可見，并且可以水平滾動非鎖定列。 如果預(yù)期的水平空間不足，則不會出現(xiàn)水平滾動條。
          • 啟用滾動。
          • 首先鎖定至少一列。
          • 定義網(wǎng)格的高度。
          • 為所有列設(shè)置顯式像素寬度，允許網(wǎng)格調(diào)整已凍結(jié)和未凍結(jié)表部件的布局。
          • 確保所有鎖定列的總寬度等于或小于網(wǎng)格的寬度減去滾動條寬度的三倍。
          • 確保未在隱藏容器內(nèi)初始化網(wǎng)格。
          注意：
          • Grid的JavaScript API允許您動態(tài)鎖定和解鎖列。 但是，只有在初始化期間至少鎖定一列時，才有可能這樣做。 應(yīng)用凍結(jié)的列時，網(wǎng)格的HTML輸出和腳本操作是不同的，這就是初始化后小部件無法在凍結(jié)和未凍結(jié)模式之間切換的原因。
          • 鎖定的列只能位于網(wǎng)格的左側(cè)，不支持將它們放置在右側(cè)。
          • 行模板和詳細(xì)信息功能不與鎖定列結(jié)合使用，如果使用多列標(biāo)題，則只能將列鎖定在最頂層。
          鎖定的列無法觸摸滾動，因?yàn)樗鼈儽环庋b在一個具有溢出：隱藏樣式的容器中。 要解決臺式機(jī)設(shè)備上的此限制，請使用mousewheel事件。 但是，觸摸設(shè)備不存在任何解決方法。
          鎖定列依賴于同步網(wǎng)格的凍結(jié)和非凍結(jié)部分的行高，某些瀏覽器（例如Internet Explorer 9和Firefox）要求以像素為單位設(shè)置行高樣式。 否則，由于子像素問題，同步可能無法正常工作。

          div.k-grid td
{
line-height: 18px;
}

          當(dāng)您實(shí)現(xiàn)自定義代碼并依靠選擇器或以Grid表為目標(biāo)時，Grid為其鎖定和可滾動部分創(chuàng)建單獨(dú)的表。 鎖定列位于.k-grid-content-locked元素內(nèi)，而可滾動內(nèi)容位于.k-grid-content元素內(nèi)。
          CSS table表格 thead固定 tbody滾動效果
          由于項(xiàng)目需要，在表格中，當(dāng)數(shù)據(jù)量越來越多時，就會出現(xiàn)滾動條，而在滾動的過程中，默認(rèn)情況下表格頭部會跟著表格內(nèi)容一起滾動，導(dǎo)致看不到頭部對應(yīng)的字段名，影響體驗(yàn)效果！
           
          實(shí)現(xiàn)思路：
          將內(nèi)容要滾動的區(qū)域控制在 tbody 標(biāo)簽中添加 overflow-y: auto; 樣式，給 tr 標(biāo)簽添加 table-layout:fixed; (這是核心)樣式，由于 tbody 有了滾動條后，滾動條也要占位，又會導(dǎo)致 tbody 和 thead 不對齊，所以在設(shè)置 tbody 的寬度時要把滾動條的寬度也加上【如果不想顯示滾動條的話，可以把滾動條的寬度設(shè)置為0px，滾動條就沒有了。
          下面是效果圖，具體完整實(shí)例代碼也在下面：

          完整實(shí)例代碼：
          <!DOCTYPE html>
<html lang="en">
 
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>純CSS table表格 thead固定 tbody滾動</title>
    <style>
        .table-box {
            margin: 100px auto;
            width: 1024px;
        }
 
        /* 滾動條寬度 */
        ::-webkit-scrollbar {
            width: 8px;
            background-color: transparent;
        }
 
        /* 滾動條顏色 */
        ::-webkit-scrollbar-thumb {
            background-color: #27314d;
        }
 
        table {
            width: 100%;
            border-spacing: 0px;
            border-collapse: collapse;
        }
 
        table caption{
            font-weight: bold;
            font-size: 24px;
            line-height: 50px;
        }
 
        table th, table td {
            height: 50px;
            text-align: center;
            border: 1px solid gray;
        }
 
        table thead {
            color: white;
            background-color: #38F;
        }
 
        table tbody {
            display: block;
            width: calc(100% + 8px); /*這里的8px是滾動條的寬度*/
            height: 300px;
            overflow-y: auto;
            -webkit-overflow-scrolling: touch;
        }
 
        table tfoot {
            background-color: #71ea71;
        }
 
        table thead tr, table tbody tr, table tfoot tr {
            box-sizing: border-box;
            table-layout: fixed;
            display: table;
            width: 100%;
        }
 
        table tbody tr:nth-of-type(odd) {
            background: #EEE;
        }
 
        table tbody tr:nth-of-type(even) {
            background: #FFF;
        }
 
        table tbody tr td{
            border-bottom: none;
        }
 
    </style>
</head>
 
<body>
    <section class="table-box">
        <table cellpadding="0" cellspacing="0">
            <caption>純CSS table表格 thead固定 tbody滾動</caption>
            
            <thead>
                <tr>
                    <th>序 號</th>
                    <th>姓 名</th>
                    <th>年 齡</th>
                    <th>性 別</th>
                    <th>手 機(jī)</th>
                </tr>
            </thead>
 
            <tbody>
                <tr>
                    <td>001</td>
                    <td>Name</td>
                    <td>28</td>
                    <td>女</td>
                    <td>Mobile</td>
                </tr>
                <tr>
                    <td>002</td>
                    <td>Name</td>
                    <td>28</td>
                    <td>男</td>
                    <td>Mobile</td>
                </tr>
                <tr>
                    <td>003</td>
                    <td>Name</td>
                    <td>28</td>
                    <td>女</td>
                    <td>Mobile</td>
                </tr>
                <tr>
                    <td>004</td>
                    <td>Name</td>
                    <td>28</td>
                    <td>男</td>
                    <td>Mobile</td>
                </tr>
                <tr>
                    <td>005</td>
                    <td>Name</td>
                    <td>28</td>
                    <td>女</td>
                    <td>Mobile</td>
                </tr>
                <tr>
                    <td>006</td>
                    <td>Name</td>
                    <td>28</td>
                    <td>男</td>
                    <td>Mobile</td>
                </tr>
                <tr>
                    <td>007</td>
                    <td>Name</td>
                    <td>28</td>
                    <td>女</td>
                    <td>Mobile</td>
                </tr>
                <tr>
                    <td>008</td>
                    <td>Name</td>
                    <td>28</td>
                    <td>男</td>
                    <td>Mobile</td>
                </tr>
            </tbody>
 
            <tfoot>
                <tr>
                    <td colspan="5">【table，thead，tbody，tfoot】 colspan：合并行， rowspan：合并列 </td>
                </tr>
            </tfoot>
        </table>
    </section>
</body>
 
</html>
          我自己是一名從事了多年開發(fā)的web前端老程序員，目前辭職在做自己的web前端私人定制課程，今年年初我花了一個月整理了一份最適合2019年學(xué)習(xí)的web前端學(xué)習(xí)干貨，各種框架都有整理，送給每一位前端小伙伴，想要獲取的可以關(guān)注我的頭條號并在后臺私信我：前端，即可免費(fèi)獲取。


          原文鏈接：https://blog.csdn.net/muguli2008/article/details/103787152
                              	
          
	
	

          

          

 
          
        
        
		  
      
          
      
      
          
    
          
  
          

          



 


			
		





          
  
          
    
  
          

          

          
	
          
		
		
		
          
	
          


          
 

 







主站蜘蛛池模板：
亚洲日韩国产欧美一区二区三区
|
日本一区二区三区四区视频|
国产vr一区二区在线观看|
日韩精品一区二区三区不卡|
国产成人精品无人区一区|
中文字幕一区二区三|
蜜桃视频一区二区三区在线观看|
精品一区二区三区四区在线播放
|
无人码一区二区三区视频|
高清国产精品人妻一区二区|
人妻少妇久久中文字幕一区二区
|
一区二区在线电影|
国模私拍福利一区二区|
国偷自产视频一区二区久|
成人区人妻精品一区二区不卡视频
|
国产精品毛片一区二区|
亚洲夜夜欢A∨一区二区三区|
91精品一区二区三区久久久久|
国产麻豆精品一区二区三区|
午夜视频久久久久一区|
亚洲一区中文字幕久久|
亚洲欧美日韩一区二区三区在线
|
精品一区二区三区免费观看|
人妻无码第一区二区三区|
精品一区二区三区电影|
国产在线精品一区二区中文
|
国产一区二区精品尤物|
欧美日韩国产免费一区二区三区|
亚洲国产精品成人一区|
乱子伦一区二区三区|
视频一区二区三区人妻系列|
国产精品揄拍一区二区|
亚洲一区爱区精品无码|
日韩免费无码一区二区视频|
无码毛片视频一区二区本码|
一区二区三区视频免费|
国产一区二区好的精华液|
无码精品人妻一区二区三区中|
精品无码成人片一区二区|
国产福利一区二区三区在线观看|
久久影院亚洲一区|