div table固定列

最新推荐文章于 2024-07-25 11:52:08 发布
最新推荐文章于 2024-07-25 11:52:08 发布
阅读量781 收藏
点赞数
分类专栏： HTML 文章标签： table div class border datagrid html
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/yy6060/article/details/7057062
版权
<html>   
<head>   
<title></title>   
<style type="text/css">   
.Freezing {   
    z-index: 10;    
    position: relative;    
    top: expression(this.offsetParent.scrollTop)   
}   
.FreezingCol {   
    z-index: 1;    
    left: expression(document.getElementById("freezingDiv").scrollLeft);    
    position: relative   
}   
</style>   
</head>   
<body>   
  <br>
div table固定列<br>
<div id="freezingDiv" style="overflow:auto; width:400px; height:155px">   
  <table cellspacing="0" cellpadding="4" rules="all" bordercolor="#3366CC" border="1" id="DataGrid1" style="background-color:White;border-color:#3366CC;border-width:1px;border-style:None;width:900px;border-collapse:collapse;">   
 
    <tr class="Freezing" style="color:#CCCCFF;background-color:#003399;font-weight:bold;">
        <td class="FreezingCol">ID</td>   
        <td class="FreezingCol">姓名</td>   
        <td>年龄</td>   
        <td>电话</td>   
        <td>性别</td>   
        <td>住址</td>   
    </tr>   
       
    <tr style="color:#003399;background-color:White;">   
        <td class="FreezingCol">   
         <span>1</span>    
        </td>   
        <td class="FreezingCol">   
        <span>张三</span>    
        </td>   
        <td>29</td>   
        <td>0000000000000</td>   
        <td>男</td>   
        <td>北京</td>   
   </tr>
   <tr style="color:#003399;background-color:White;">   
        <td class="FreezingCol">   
           <span>1</span>    
        </td>   
        <td class="FreezingCol">   
          <span>李四</span>    
        </td>   
        <td>29</td>   
        <td>0000000000000</td>   
        <td>男</td>   
        <td>上海</td>   
   </tr>
   <tr style="color:#003399;background-color:White;">   
        <td class="FreezingCol">   
           <span>1</span>    
        </td>   
        <td class="FreezingCol">   
          <span>王五</span>    
        </td>   
        <td>50</td>   
        <td>0000000000000</td>   
        <td>男</td>   
        <td>上海</td>   
   </tr>
   <tr style="color:#003399;background-color:White;">   
        <td class="FreezingCol">   
           <span>1</span>    
        </td>   
        <td class="FreezingCol">   
          <span>赵六</span>    
        </td>   
        <td>29</td>   
        <td>0000000000000</td>   
        <td>男</td>   
        <td>上海</td>   
   </tr> 
   <tr style="color:#003399;background-color:White;">   
        <td class="FreezingCol">   
           <span>1</span>    
        </td>   
        <td class="FreezingCol">   
          <span>赵七</span>    
        </td>   
        <td>29</td>   
        <td>0000000000000</td>   
        <td>男</td>   
        <td>上海</td>   
   </tr>        
  </table>   
</div>   




<br>
cellspacing =0<br>
<table width="200" cellspacing="0" border="1" bordercolor="#000000">
<tr> 
<td>sd </td>
<td>sd </td>
<td>sd </td>
</tr>
</table>
<br>
cellspacing =8<br>
<table width="200" cellspacing="8" border="1" bordercolor="#000000">
<tr>
<td>sd </td>
<td> dd</td>
<td>dd </td>
</tr>
</table>
  
</body>   
</html>
yy6060
关注
  • 0
    点赞
  • 踩
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
专栏目录
table固定列html5,css+js简单实现table固定首行首列
weixin_29007809的博客
07-09 1359
说明：使用easyui等都可以实现table固定首行首列的功能。但仅仅只需要这一个功能，完全可以用css+js简单实现而不用引入更多工具。网上找到很多的思路，自己对其中比较简单的一个进行了整理。大致效果：Paste_Image.png页面布局：Paste_Image.png如上图：1、整个页面分成 左右 两部分：2、左边分为 上下 两部分3、右边分为 上下 两部分(红色框比较特殊，多加一个div为...
table一列固定
大山博客
05-14 5349
例图 暂无例图，图插不上 <!DOCTYPE html> <html> <head> <meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> <title></title> <meta charset="utf-8...
table固定首行首列
Stavin Li的博客
12-29 7999
原理 表格左右拆分，再上下拆分，最后拆分为四个table容器 滚动右下table时，加scroll事件，控制左下scrollTop与右上scrollLeft两个table的scroll值 注意 左下、右上overflow: hidden,右下overflow: scroll 左下、右下最后需要新增&lt;td style="visibility: hidden;"&gt;&lt;/td&g...
Table固定表头固定左侧列
duxue1061484831的博客
11-26 8419
效果图： 思路：把需要固定的内容进行拆封，比如左侧的表头和内容，右侧的表头和内容，都单独的存放在一个table中，在滚动条滚动的时候通过jquery scroll()区分横向纵向滚动条的方法来实现左侧内容的滚动和右侧表头的滚动。 第一步： &lt;div class="jxc-right"&gt; &lt;div id="left_div" style="float:le...
关于table表格头部固定和列固定的方式
b0303的博客
01-20 3264
无论你用什么框架都要用到table固定列或者表头的现象。最近用到了，写个demo以备后面用，顺便分享一下，提供给徐亚的人。 下面是代码： <!DOCTYPE html> <html lang="zh"> <head> <meta charset="utf-8"> <title>表格第一行和前几列固定</title&...
table固定表头、固定列
RRRRRDong的博客
07-17 8360
最近在做一些报表，使用原生table画的，记录一下固定表头的一些方法。 使用position:sticky来固定表头 html: <div id="common-table"> <table id="table-container" cellpadding="0" cellspacing="0" border="0"> <thead> <tr> <th>1</th>
table-固定首列
weixin_42979149的博客
03-11 2318
首先，table外层套两层div，outerDiv和 innerDiv &amp;amp;lt;div class=&amp;quot;outerDiv&amp;quot;&amp;amp;gt; &amp;amp;lt;div class=&amp;quot;innerDiv&amp;quot;&amp;amp;gt; &amp;amp;lt;table border=&amp;quot;0&amp;quot;
基于Bootstrap Table的表格右侧列固定
qq_31606569的博客
09-25 8938
基于Bootstrap Table的表格右侧列固定 参考官方demo：https://examples.bootstrap-table.com/#extensions/fixed-columns.html 欢迎使用Markdown编辑器 你好！ 这是你第一次使用 Markdown编辑器 所展示的欢迎页。如果你想学习如何使用Markdown编辑器, 可以仔细阅读这篇文章，了解一下Markdown的基...
div固定行固定列
qq_51389137的博客
09-14 128
【代码】div固定行固定列。
element table 自定义列 + 固定列 导致显示问题
qq_36126031的博客
12-16 1943
element-table组件动态表头 + 固定列导致的显示问题解决方案
HTML+CSS+JS实现完美兼容各大浏览器的TABLE固定列
10-24
这就是所谓的“固定列”功能。本文将探讨如何使用HTML、CSS和JavaScript来实现一个兼容各大浏览器的表格固定列解决方案。 首先，HTML部分主要负责创建表格的基本结构。我们需要一个包含标题和主体的表格，以及一个...
html table 固定表头和列
09-21
在"html+table固定表头和列"的压缩包中，可能包含了一个实现这个功能的示例。运行`index.html`文件，可以查看实际效果。通常，它会结合HTML、CSS和可能的JavaScript来实现固定表头和列的功能。 五、兼容性和优化 ...
table表格固定行和列
05-11
虽然`table`元素本身不支持Flexbox或Grid布局，但可以通过将表格数据转换为其他HTML结构（如`div`），再利用Flexbox或Grid的特性来实现固定行和列。这种方法在响应式设计中非常强大，但需要更多的代码和计算。 5. ...
Jquery table固定表头,固定列,全浏览器兼容
11-19
2. **固定列（Fixed Column）**：固定列相对复杂，需要创建一个新的 `div` 来包裹固定列，并将其设置为绝对定位。在滚动时，根据滚动条的位置调整这个 `div` 的位置。这可能涉及到表格的拆分和重组，以及使用负的 `...
HTML页面table表格固定行和列
01-04
这个例子中，我们使用了CSS Grid将表格分为两部分，左侧固定列和右侧可滚动列。`position: sticky`属性使表头在滚动时保持在视口顶部，`left: 0`确保它固定在左侧。 对于更复杂的情况，例如，当表格有交错的表头...
基于 HTML+ECharts 实现的大数据可视化平台模板（含源码）
柯晓楠
07-24 3231
大数据的可视化对于企业决策、市场分析和业务洞察至关重要。通过直观的数据展示，团队可以快速理解复杂的数据模式，发现潜在的业务机会。本文将详细介绍如何利用 HTML 和 ECharts 实现一个功能丰富的大数据可视化平台模板。
iframe 渲染请求到的 html (邮件预览), 避免样式污染 + 打印 iframe 邮件详情 + iframe 预览邮件时固定水平滚动条在视口底部
最新发布
汤一飞
07-25 990
iframe 预览邮件 + 打印邮件 + 模拟滚动条
基于 HTML+ECharts 实现的数据可视化大屏案例（含源码）
柯晓楠
07-24 649
数据可视化已成为企业决策和业务分析的重要工具。通过直观、动态的图表展示，数据可视化大屏能够帮助用户快速理解复杂的数据关系，发现潜在的业务趋势。本文将介绍如何利用 HTML 和 ECharts 实现一个功能丰富的数据可视化大屏案例。
【HTML — 构建网络】HTML 入门
07-24 1129
如果您查看许多其他站点的代码，您可能会遇到许多奇怪的标记样式，包括不带引号的属性值。在这一点上，你应该了解 HTML 是什么样子的，以及它在基本层面上是如何工作的。在 HTML 中，不需要在 void 元素标记的末尾添加 a，例如： .但是，它也是一种有效的语法，当您希望 HTML 是有效的 XML 时，您可以这样做。现在，您可以在 Web 浏览器中打开此文件，以查看呈现的代码的外观。在本练习中，您可以如前所述在计算机上本地编辑代码，也可以在下面的示例窗口中编辑代码（在本例中，可编辑示例窗口仅表示。
table固定列 横向滚动
06-28
回答1：</h3><br/>Table固定列横向滚动，是指在表格的左侧或右侧选定某一列，让该列固定不动，而其他列随着页面的横向滚动而滑动。这种布局方式通常用于需要在表格中浏览大量数据时。通过固定列，用户可以快速查看...
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值