表格头固定而列可滚动的效果

最新推荐文章于 2022-11-12 15:04:11 发布
最新推荐文章于 2022-11-12 15:04:11 发布
阅读量157 收藏
点赞数
分类专栏： web 文章标签： CSS 脚本

对于经常需要表格头部不东，而列表可以滚动，多用于数据比较多的情况，方便查看

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
<html>
<head>
<title>表格头固定而列可滚动的效果-脚本之家</title>
</head>
<style type="text/css">
body {
font-family: "arial", "helvetica", "sans-serif", "";
font-size: 9pt;
margin: 0px;
scrollbar-face-color:#efefe7;
scrollbar-highlight-color:#ffffff;
scrollbar-3dlight-color:#a5a5a5;
scrollbar-darkshadow-color:#a5a5a5;
scrollbar-shadow-color:#d6d6ce;
scrollbar-arrow-color:#003184;
scrollbar-track-color:#deded6;
}
table {
font-family: "arial", "helvetica", "sans-serif","";
font-size: 9pt;
line-height: 150%;
color: #000000;
}
.display-tb2
{
border-right: #808080 1px solid;
border-top: #808080 1px solid;
border-left: #808080 1px solid;
border-bottom: #808080 1px solid;
border:0;
cellpadding:2;
cellspacing:0;
margin-top:2px;
border-collapse:collapse;
}
div.tableContainer
{
overflow-x:auto;
width:760px;
dyn-behavior:expression(
onscroll == null?
(onscroll = function(){
if(event.srcElement.scrollLeft == event.srcElement.oldScroll) return;
var oGridBody = document.getElementById("order_GridBody");
oGridBody.style.width = parseInt(event.srcElement.clientWidth) + event.srcElement.scrollLeft + "px";
event.srcElement.oldScroll == event.srcElement.scrollLeft;
}):true,
onmousedown == null?
(onmousedown = function(){
if(self.currentTH != null) return;
var obj = document.elementFromPoint(event.x,event.y);
var objL = document.elementFromPoint(event.x - 1,event.y);

if(obj.tagName.toLowerCase() == "th")
{

if(objL.tagName.toLowerCase() == "th")
{
obj = objL;
}
if(obj.className == "fixed") return;
self.currentX = event.x;
self.currentTH = obj.childNodes[0];
self.currentTH.setCapture();
}
}):true,
onmouseup == null?
(onmouseup = function(){
if(self.currentTH != null)
{
self.currentTH.releaseCapture();
self.currentTH = null;
}
}):true,
onmousemove == null?
(onmousemove = function(){
if(self.currentTH != null)
{
var width = Math.round(parseInt(self.currentTH.clientWidth) + event.x - self.currentX);
if(width < 0) width = 0;
var dt = parseInt(self.currentTH.style.width) - width;
self.currentTH.style.width = width;
__resizeCell(self.currentTH.columnIndex,self.currentTH.style.width);
self.currentX = event.x;
}
}):true,
self.__resizeCell == null?
(self.__resizeCell = function(idx, width){
var cells = document.getElementById("order_GridBody_Cells");
var rows = cells.childNodes;
var i = 0;
for (var i = 0; i < rows.length; i++)
{
var cell = rows[i].childNodes[idx].childNodes[0];
var resetPattern = /style=[^\s\t\n]+/;
cell.outerHTML = cell.outerHTML.toString().replace(resetPattern, "style='width:" +width + "'");
}
}):true
)
}
div.bodyContainer
{
height:250px;
width:760px;
overflow-x:hidden;
overflow-y:auto;
}
div.gridCell_standard
{
width:100px;
overflow:hidden;
nw:expression(this.noWrap=true);
margin-left: 0px;
margin-right: 1px;
padding-left: 2px;
cursor:default;
}
div.gridCell_narrow
{
width:30px;
overflow:hidden;
margin-left: 0px;
margin-right: 1px;
padding-left: 2px;
nw:expression(this.noWrap=true);
cursor:default;
}
th
{
border-right: #a4a6a4 1px solid;
border-top: #a4a6a4 1px solid;
border-left: #a4a6a4 1px solid;
border-bottom: #a4a6a4 1px solid;
background-image: url(images/default/headerbg.gif);
color:#ffffff;
font-style:normal;
font-weight:normal;
height:20px;
cursor:col-resize;
dyn-behavior:expression(
ondblclick == null?
(ondblclick = function()
{
var src = event.srcElement;
if(event.srcElement.tagName.toLowerCase()!="div")
{
src = src.childNodes[0];
}
src.style.width = "";
__resizeCell(src.columnIndex,src.clientWidth);
}):true
)
}
th.fixed
{
border-right: #a4a6a4 1px solid;
border-top: #a4a6a4 1px solid;
border-left: #a4a6a4 1px solid;
border-bottom: #a4a6a4 1px solid;
background-image: url(images/default/headerbg.gif);
color:#ffffff;
font-style:normal;
font-weight:normal;
height:20px;
cursor:default;
}
tr.odd
{
border-right: #a4a6a4 1px solid;
border-top: #a4a6a4 0px solid;
border-left: #a4a6a4 0px solid;
border-bottom: #a4a6a4 1px solid;
noWrap;
}
tr.even
{
border-right: #a4a6a4 1px solid;
border-top: #a4a6a4 0px solid;
border-left: #a4a6a4 0px solid;
border-bottom: #a4a6a4 1px solid;
}
td.odd_even
{
border-right: #a4a6a4 1px solid;
border-top: #a4a6a4 1px solid;
border-left: #a4a6a4 1px solid;
border-bottom: #a4a6a4 1px solid;
noWrap;
}
td.select-cell
{
border-right: #a4a6a4 1px solid;
border-top: #a4a6a4 1px solid;
border-left: #a4a6a4 1px solid;
border-bottom: #a4a6a4 1px solid;
}
th{
color:#ff0000;
}
</style>

<body bgcolor="F6F6F6" style="padding:10 10 10 10">

<div class="tableContainer" id="order_Container">
<!--动态表格-->
<table cellpadding="0" class="display-tb2" style="margin-top: 2px;" cellspacing="0" border="0" id="order">
<tr>
<td>
<table cellpadding="0" class="display-tb2" style="margin-top: 0px;" cellspacing="0" border="0">
<thead>
<th class="fixed"><div columnIndex="0" class="gridCell_narrow">选择</div></th>
<th><div columnIndex="1" class="gridCell_standard">订单编号</div></th>
<th><div columnIndex="2" class="gridCell_standard">订货日期</div></th>
<th><div columnIndex="3" class="gridCell_standard">订货单位</div></th>
<th><div columnIndex="4" class="gridCell_standard">订单类别</div></th>
<th><div columnIndex="5" class="gridCell_standard">产品类别</div></th>
<th><div columnIndex="6" class="gridCell_standard">版本号</div></th>
<th><div columnIndex="7" class="gridCell_standard">订货金额</div></th>
<th><div columnIndex="8" class="gridCell_standard">订单状态</div></th>
</thead>
</table>
</td>
</tr>
<!--<tfoot> 共3页 </tfoot>-->
<tbody>
<tr class="odd">
<td colspan="9">
<div id="order_GridBody" class="bodyContainer">
<table cellpadding="0" class="display-tb2" style="margin-top: 0px;" cellspacing="0" border="0">
<tbody id="order_GridBody_Cells">
<tr class="even">
<td width="30px" class="select-cell">
<div class="gridCell_narrow"><input type="checkbox" name="id" value="2" /></div></td>
<td class="odd_even"><div class="gridCell_standard">DJPH001</div></td>
<td class="odd_even"><div class="gridCell_standard">2005-02-02</div></td>
<td class="odd_even"><div class="gridCell_standard">19</div></td>
<td class="odd_even"><div class="gridCell_standard">直销</div></td>
<td class="odd_even"><div class="gridCell_standard">KIS</div></td>
<td class="odd_even"><div class="gridCell_standard">5</div></td>
<td class="odd_even"><div class="gridCell_standard">12.0000</div></td>
<td class="odd_even"><div class="gridCell_standard">已取消</div></td></tr>
<tr class="even">
<td width="30px" class="select-cell">
<div class="gridCell_narrow"><input type="checkbox" name="id" value="3" /></div> </td>
<td class="odd_even"><div class="gridCell_standard">DJPH001</div></td>
<td class="odd_even"><div class="gridCell_standard">2005-02-02</div></td>
<td class="odd_even"><div class="gridCell_standard">19</div></td>
<td class="odd_even"><div class="gridCell_standard">购销</div></td>
<td class="odd_even"><div class="gridCell_standard">KIS</div></td>
<td class="odd_even"><div class="gridCell_standard">5</div></td>
<td class="odd_even"><div class="gridCell_standard">21.0000</div></td>
<td class="odd_even"><div class="gridCell_standard"> </div></td></tr>
<tr class="odd">
<td width="30px" class="select-cell">
<div class="gridCell_narrow"><input type="checkbox" name="id" value="4" /></div> </td>
<td class="odd_even"><div class="gridCell_standard">DJPH889</div></td>
<td class="odd_even"><div class="gridCell_standard">2005-02-02</div></td>
<td class="odd_even"><div class="gridCell_standard">0</div></td>
<td class="odd_even"><div class="gridCell_standard">购销</div></td>
<td class="odd_even"><div class="gridCell_standard">KIS</div></td>
<td class="odd_even"><div class="gridCell_standard">5</div></td>
<td class="odd_even"><div class="gridCell_standard">21.0000</div></td>
<td class="odd_even"><div class="gridCell_standard">已取消</div></td></tr>
<tr class="even">
<td width="30px" class="select-cell">
<div class="gridCell_narrow"><input type="checkbox" name="id" value="5" /></div> </td>
<td class="odd_even"><div class="gridCell_standard">DJPH889</div></td>
<td class="odd_even"><div class="gridCell_standard">2005-02-02</div></td>
<td class="odd_even"><div class="gridCell_standard">0</div></td>
<td class="odd_even"><div class="gridCell_standard">直销</div></td>
<td class="odd_even"><div class="gridCell_standard">KIS</div></td>
<td class="odd_even"><div class="gridCell_standard">5</div></td>
<td class="odd_even"><div class="gridCell_standard">1.0000</div></td>
<td class="odd_even"><div class="gridCell_standard"> </div></td></tr>
<tr class="odd">
<td width="30px" class="select-cell">
<div class="gridCell_narrow"><input type="checkbox" name="id" value="6" /></div> </td>
<td class="odd_even"><div class="gridCell_standard">tytutyjh465456</div></td>
<td class="odd_even"><div class="gridCell_standard">2005-02-02</div></td>
<td class="odd_even"><div class="gridCell_standard">0</div></td>
<td class="odd_even"><div class="gridCell_standard">购销</div></td>
<td class="odd_even"><div class="gridCell_standard">KIS</div></td>
<td class="odd_even"><div class="gridCell_standard">0</div></td>
<td class="odd_even"><div class="gridCell_standard">21.0000</div></td>
<td class="odd_even"><div class="gridCell_standard">生产部已审核</div></td></tr>
<tr class="even">
<td width="30px" class="select-cell">
<div class="gridCell_narrow"><input type="checkbox" name="id" value="7" /></div> </td>
<td class="odd_even"><div class="gridCell_standard">KDSZ2005050698</div></td>
<td class="odd_even"><div class="gridCell_standard">2005-05-05</div></td>
<td class="odd_even"><div class="gridCell_standard">-1</div></td>
<td class="odd_even"><div class="gridCell_standard">分销</div></td>
<td class="odd_even"><div class="gridCell_standard">KIS</div></td>
<td class="odd_even"><div class="gridCell_standard">10.2</div></td>
<td class="odd_even"><div class="gridCell_standard">21.0000</div></td>
<td class="odd_even"><div class="gridCell_standard">生产部已审核</div></td></tr>
<tr class="odd">
<td width="30px" class="select-cell">
<div class="gridCell_narrow"><input type="checkbox" name="id" value="8" /></div> </td>
<td class="odd_even"><div class="gridCell_standard">KDSZ2005050698</div></td>
<td class="odd_even"><div class="gridCell_standard">2005-05-05</div></td>
<td class="odd_even"><div class="gridCell_standard">-1</div></td>
<td class="odd_even"><div class="gridCell_standard">分销</div></td>
<td class="odd_even"><div class="gridCell_standard">KIS</div></td>
<td class="odd_even"><div class="gridCell_standard">10.2</div></td>
<td class="odd_even"><div class="gridCell_standard">12.0000</div></td>
<td class="odd_even"><div class="gridCell_standard">总代已审核</div></td></tr>
<tr class="even">
<td width="30px" class="select-cell">
<div class="gridCell_narrow"><input type="checkbox" name="id" value="9" /></div> </td>
<td class="odd_even"><div class="gridCell_standard">KDSZ2005050698</div></td>
<td class="odd_even"><div class="gridCell_standard">2005-05-05</div></td>
<td class="odd_even"><div class="gridCell_standard">-1</div></td>
<td class="odd_even"><div class="gridCell_standard">分销</div></td>
<td class="odd_even"><div class="gridCell_standard">KIS</div></td>
<td class="odd_even"><div class="gridCell_standard">10.2</div></td>
<td class="odd_even"><div class="gridCell_standard">32.0000</div></td>
<td class="odd_even"><div class="gridCell_standard">已取消</div></td></tr>
<tr class="odd">
<td width="30px" class="select-cell">
<div class="gridCell_narrow"><input type="checkbox" name="id" value="10" /></div> </td>
<td class="odd_even"><div class="gridCell_standard">KDSZ2005050698</div></td>
<td class="odd_even"><div class="gridCell_standard">2005-05-05</div></td>
<td class="odd_even"><div class="gridCell_standard">-1</div></td>
<td class="odd_even"><div class="gridCell_standard">分销</div></td>
<td class="odd_even"><div class="gridCell_standard">KIS</div></td>
<td class="odd_even"><div class="gridCell_standard">10.2</div></td>
<td class="odd_even"><div class="gridCell_standard">12.0000</div></td>
<td class="odd_even"><div class="gridCell_standard"> </div></td></tr>
<tr class="even">
<td width="30px" class="select-cell">
<div class="gridCell_narrow"><input type="checkbox" name="id" value="11" /></div> </td>
<td class="odd_even"><div class="gridCell_standard">KDSZ2005050698</div></td>
<td class="odd_even"><div class="gridCell_standard">2005-05-05</div></td>
<td class="odd_even"><div class="gridCell_standard">-1</div></td>
<td class="odd_even"><div class="gridCell_standard">分销</div></td>
<td class="odd_even"><div class="gridCell_standard">KIS</div></td>
<td class="odd_even"><div class="gridCell_standard">10.2</div></td>
<td class="odd_even"><div class="gridCell_standard">12.0000</div></td>
<td class="odd_even"><div class="gridCell_standard"> </div></td></tr>
<tr class="odd">
<td width="30px" class="select-cell">
<div class="gridCell_narrow"><input type="checkbox" name="id" value="12" /></div> </td>
<td class="odd_even"><div class="gridCell_standard">KDSZ2005050698</div></td>
<td class="odd_even"><div class="gridCell_standard">2005-05-05</div></td>
<td class="odd_even"><div class="gridCell_standard">-1</div></td>
<td class="odd_even"><div class="gridCell_standard">分销</div></td>
<td class="odd_even"><div class="gridCell_standard">KIS</div></td>
<td class="odd_even"><div class="gridCell_standard">10.2</div></td>
<td class="odd_even"><div class="gridCell_standard">12.0000</div></td>
<td class="odd_even"><div class="gridCell_standard">已取消</div></td></tr>
<tr class="even">
<td width="30px" class="select-cell">
<div class="gridCell_narrow"><input type="checkbox" name="id" value="13" /></div> </td>
<td class="odd_even"><div class="gridCell_standard">KDSZ2005050698</div></td>
<td class="odd_even"><div class="gridCell_standard">2005-05-05</div></td>
<td class="odd_even"><div class="gridCell_standard">-1</div></td>
<td class="odd_even"><div class="gridCell_standard">分销</div></td>
<td class="odd_even"><div class="gridCell_standard">KIS</div></td>
<td class="odd_even"><div class="gridCell_standard">10.2</div></td>
<td class="odd_even"><div class="gridCell_standard">12.0000</div></td>
<td class="odd_even"><div class="gridCell_standard">已取消</div></td></tr>
<tr class="odd">
<td width="30px" class="select-cell">
<div class="gridCell_narrow"><input type="checkbox" name="id" value="14" /></div> </td>
<td class="odd_even"><div class="gridCell_standard">KDSZ2005050698</div></td>
<td class="odd_even"><div class="gridCell_standard">2005-05-05</div></td>
<td class="odd_even"><div class="gridCell_standard">-1</div></td>
<td class="odd_even"><div class="gridCell_standard">分销</div></td>
<td class="odd_even"><div class="gridCell_standard">KIS</div></td>
<td class="odd_even"><div class="gridCell_standard">10.2</div></td>
<td class="odd_even"><div class="gridCell_standard">12.0000</div></td>
<td class="odd_even"><div class="gridCell_standard">已取消</div></td></tr>
<tr class="even">
<td width="30px" class="select-cell">
<div class="gridCell_narrow"><input type="checkbox" name="id" value="15" /></div> </td>
<td class="odd_even"><div class="gridCell_standard">KDSZ2005050698</div></td>
<td class="odd_even"><div class="gridCell_standard">2005-05-05</div></td>
<td class="odd_even"><div class="gridCell_standard">-1</div></td>
<td class="odd_even"><div class="gridCell_standard">分销</div></td>
<td class="odd_even"><div class="gridCell_standard">KIS</div></td>
<td class="odd_even"><div class="gridCell_standard">10.2</div></td>
<td class="odd_even"><div class="gridCell_standard">21.0000</div></td>
<td class="odd_even"><div class="gridCell_standard">已取消</div></td></tr>
<tr class="odd">
<td width="30px" class="select-cell">
<div class="gridCell_narrow"><input type="checkbox" name="id" value="16" /></div> </td>
<td class="odd_even"><div class="gridCell_standard">KDSZ2005050698</div></td>
<td class="odd_even"><div class="gridCell_standard">2005-05-05</div></td>
<td class="odd_even"><div class="gridCell_standard">-1</div></td>
<td class="odd_even"><div class="gridCell_standard">分销</div></td>
<td class="odd_even"><div class="gridCell_standard">KIS</div></td>
<td class="odd_even"><div class="gridCell_standard">10.2</div></td>
<td class="odd_even"><div class="gridCell_standard">12.0000</div></td>
<td class="odd_even"><div class="gridCell_standard">已取消</div></td></tr>

</tbody>
</table>
</div>
</td>
</tr>
</tbody>
</table>
<div style="height:15px"></div>
</div>
</body>
</html>

freeglad
关注
  • 0
    点赞
  • 踩
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
专栏目录
实现表格动态滚动效果
05-04
通过CSS+Javascript实现类似表格的动态滚动效果，用ul和li标签模拟表格，文件包括实现源码。
表格滚动效果实现方案
weixin_45446099的博客
10-21 707
效果图 css代码 * { margin: 0; padding: 0; } ::-webkit-scrollbar { width: 4px; height: 4px; } ::-webkit-scrollbar-thumb { border-radius: 5px; .
创建头部固定可滚动的表格
cai555的专栏
11-16 199
         一直以来，我都找不到一个比较好的方法用来创建头部固定可滚动的表格，网上有的只是使用javascript或者使用两三层的table标签，来实现这个功能，这样做都不好，浪费资源。直到看到了这篇文章：http://www.imaputz.com/uportal/index.php?p=18 里面有两个例子： The Big Four Version and The Bullet Res...
实现类似表格内容动态滚动效果
wml00000的博客
05-04 4774
文章目录需求背景效果图实现思路示例代码 需求背景 在一些大屏首页展示上，通常会有一些表格展示，由于大屏的特殊性，不会有人专门去操作这个页面查看相应数据，一般都会采用动态滚动的效果。下面是具体的实现。 效果图 实现思路 通过<ul>和<li>标签模拟表格的表头、表身； 给最开始显示的几行数据设置样式，主要是设置其{top: }属性值； 通过setInterval方法动态改...
JS实现table表格固定表头且表头随横向滚动而滚动
10-19
JS实现table表格固定表头且表头随横向滚动而滚动的知识点如下： 1. **基本思路**： - 表头采用一个独立的table元素，并用一个div进行包裹。 - 头部外层div使用相对定位（position: relative），以使表头能够相...
jQuery实现表头固定表格内容滚动效果
11-02
在网页设计中，当表格数据过多...总之，通过`jQuery`实现表头固定表格内容滚动效果，可以提升用户在浏览大量数据时的体验。在实际应用中，可以根据项目需求对上述代码进行调整和优化，以达到最佳的视觉效果和性能表现。
jQuery仿excel表格头部固定内容滚动效果代码
10-27
【jQuery仿Excel表格头部固定内容滚动效果代码】是一种在网页中实现类似电子表格的交互体验的技术，它使得用户在浏览长表格时，可以保持表头（即列标题）始终可见，即使当表格内容滚动时也是如此。这个功能在数据量...
利用CSS实现固定表头（支持竖向固定，横向拖动）
TANHAIWEI的专栏
02-09 921
现在又找到一份，但是还是有些问题没有解决，第一是将DIV的高度设置为百分比的时候，一定要设置好DIV所在容器的高度，第二是如果表格设置了背景图片，背景图片还是会往上拉走。 [code="html"] body { background-color: #F0F0F0 ; font: 11px "verdana","Arial"; width:...
头行固定的自由滑动表格的简单实现
qq_34215717的博客
09-28 603
表格在上下滑动时，头行是固定的，且不需要设置联动。效果截了几张图：       右滑、下滑、选中：      结构如下： 表头LinearLayout和表内容ListView的每一项Item是同一个LinearLayout，如果想要不同的也行，但是设置好宽度，不然后面显示起来会对不齐。 Item的xml代码： &lt;?xml version="1.0" encoding="u...
html_ionic 表头 表底 下拉
暴风雨的博客
01-11 401
charset="UTF-8">     name="viewport" content="width=device-width" />   href="lib/css/ionic.css" rel="stylesheet" />   src="lib/js/ionic.bundle.js">     a
ionic slide tabs实现滑动菜单
xfj的博客
07-21 1619
1、新建项目 2、任一页面 <ion-slide-box show-pager="false" class="has-header" on-slide-changed="slideChanged($index)"> <ion-slide > </ion-slide> </ion-slide-box> <ion-tabs class="tabs-striped tabs-top">
动手练一练，手写一个价格对比、固定表头滚动的表格
前端达人
03-26 712
大家好，今天我们将一起实践下如何手写固定表头，那么什么是固定表头呢？就类似 Excel 表格有个锁定表头的功能，方便用户查阅数据进行数据项的对比。虽然有...
ionic实现表格头部和第一列固定且都可滚动
热门推荐
lishihong
09-30 1万+
由于移动端屏幕有限，在展示多行多列的表格类型数据时，需要做成可滚动的来展示，但是滚动的时候，我们需要表头和第一列固定，以便在滚动的时候，可以看到该行、该列所属。
#Table纵向滚动时表头固定 [ position:sticky ]
m0_64332792的博客
01-28 2132
问题：使用antd <Table>组件自带的scroll属性会出现白色空隙，column添加width属性后也无法消除，并且table tbody内不能使用自定义的滚动轴。 解决方法：使用cssposition：sticky 粘性定位 特性： 该属性相当于position:relative 与 position:fixed来回切换。当滚动超出目标区域后，将会切换到fixed状态，固定在目标区域的指定位置 不会脱离文档流，保留原本位置 需与top / bottom / left / r.
实现双向固定表头的表格
lm278858445的专栏
11-28 3770
实现目标 包含横向表头和纵向表头的表格 在横向滚动轴滚动时，横向表头随之滚动，纵向表头固定不变 在纵向滚动轴滚动时，纵向表头随之滚动，横向表头固定不变 效果图 使用资源 angularjs jquery sublime 实现1.基本结构 由于滚动轴会占据一定位置所以在横向表头和纵向表头计算时需要排除掉滚动条的宽动，如果希望使用插件scrollbar.js。 scrollbar.js是由
在Column中嵌入横向滚动的ListView
最新发布
qq_41818873的博客
11-12 365
但是高度指定的话毕竟不利于拓展，我们希望能根据item自动计算出高度，借鉴到一个比较好的思路是利用Stack布局，它会自动根据除Positioned组件之外的组件的大小来计算出自身的大小，于是我们可以提供一个item作为原型给stack计算大小，将ListView放在Position中显示。
ion-content中存在ion-list,在ion-list外固定其他控件位置不滚动
陈冬明与贝格伯格
11-23 5122
重点 ion-content scroll="false"> 然后在 外包裹   ， 此处的height必须有，不然滚动尺寸有问题。 单此时如果底部有tabs，会发现list最后一行被tabs遮住了，一个偷懒的方法就是启用infinite-scroll，把最后一行进行填充，就是增加 。 这时list拉到底会有个loading的icon出现，为了不让这个icon出现，可以设置ion-infini
实现表格头固定，列滚动效果的技术方案
在网页设计中，特别是在处理大量数据展示时，表格头固定而列可滚动的效果是非常实用的。这种布局方式使得用户在浏览长表格时，可以始终保持列标题可见，方便理解每一列的数据含义，而滚动条只在表格内容区域移动，不...
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值