介绍

例子

使用代码

解释

样式表

样式化TH（标题）

冻结第1列

冻结第2列

介绍

本文展示了一种仅使用CSS冻结HTML表格列和行的可能方法，而无需JavaScript或JQuery。

例子

示例 1：如Youtube教程视频所示

https://adriancs.com/demo/freeze_table_column_row_responsive_youtube.html

示例 2：固定宽度和高度

https://adriancs.com/demo/freeze_table_column_row.html

示例 3：响应式宽度和高度（使用视口调整）

https://adriancs.com/demo/freeze_table_column_row_responsive_viewport.html

使用代码

我们以一个简单的HTML Table为例：

<div class="div1"><table><tr><th>Column 1</th><th>Column 2</th><th>Column 3</th><th>Column 4</th><th>Column 5</th><th>Column 6</th></tr><tr><td>Row Data 1</td><td>Row Data 2</td><td>Row Data 3</td><td>Row Data 4</td><td>Row Data 5</td><td>Row Data 6</td></tr><tr><td>Row Data 1</td><td>Row Data 2</td><td>Row Data 3</td><td>Row Data 4</td><td>Row Data 5</td><td>Row Data 6</td></tr><tr><td>Row Data 1</td><td>Row Data 2</td><td>Row Data 3</td><td>Row Data 4</td><td>Row Data 5</td><td>Row Data 6</td></tr></table>
</div>

这是具有魔力的CSS：

.div1 {width: 600px;height: 400px;overflow: scroll;border: 1px solid #777777;
}.div1 table {border-spacing: 0;
}.div1 th {border-left: none;border-right: 1px solid #bbbbbb;padding: 5px;width: 80px;min-width: 80px;position: sticky;top: 0;background: #727272;color: #e0e0e0;font-weight: normal;
}.div1 td {border-left: none;border-right: 1px solid #bbbbbb;border-bottom: 1px solid #bbbbbb;padding: 5px;width: 80px;min-width: 80px;
}.div1 th:nth-child(1),
.div1 td:nth-child(1) {position: sticky;left: 0;width: 150px;min-width: 150px;
}.div1 th:nth-child(2),
.div1 td:nth-child(2) {position: sticky;/* 1st cell left/right padding + 1st cell width + 1st cell left/right border width *//* 0 + 5 + 150 + 5 + 1 */left: 161px;width: 50px;min-width: 50px;
}.div1 td:nth-child(1),
.div1 td:nth-child(2) {background: #ffebb5;
}.div1 th:nth-child(1),
.div1 th:nth-child(2) {z-index: 2;
}

解释

首先，使用一个DIV标签来包含TABLE，提供一个固定的宽度和高度来将一个很长很宽的HTML表格变成可滚动的表格。

.div1 {width: 600px;height: 400px;overflow: scroll;border: 1px solid #777777;
}

“overflow: scroll”的属性将使表格可滚动。

为了构建响应式表格，可以使用CSS函数“CALC”来自动计算宽度，例如：

.div1 {height: calc(100vh - 250px);width: calc(100vw - 100px);overflow: scroll;border: 1px solid #777777;
}

请注意，CALC值之间需要空格。

例如，这是错误的：

height: calc(100vh-250px);

这是正确的：

height: calc(100vh - 250px);

“vh”或“vw”是“Viewport”单位。

100vh = 100% 可见高度，类似于窗口大小，它指的是可见区域。
100vw = 100% 可见宽度。

样式表

.div1 table {border-spacing: 0;
}

border-spacing: 0, 消除单元格之间的空白距离

请注意，在这种情况下不能使用“border-collapse: collapse”的属性。这是因为边界线将与“position: sticky”一起表现不正确，这将在下面讨论。

样式化TH（标题）

.div1 th {border-left: none;border-right: 1px solid #bbbbbb;padding: 5px;width: 80px;min-width: 80px;position: sticky;top: 0;background: #727272;color: #e0e0e0;font-weight: normal;
}

position: sticky，这将使TH单元格始终保持在顶部位置
top: 0，这告诉TH 单元格始终停留在从顶部测量的位置0（零）
background，没有背景颜色，底部TD单元格会“撞”成TH单元格，使它们相互重叠
width, min-width：这个是用来固定列宽的，没有这些属性，单元格列会变形压缩

这是将冻结“标题”。

冻结第1列

.div1 th:nth-child(1),
.div1 td:nth-child(1) {position: sticky;left: 0;width: 150px;min-width: 150px;
}

nth-child(1)表示每个“TR”块中的第一个元素。指第第1列。
left: 0告诉单元格在左起零位置“冻结”。

冻结第2列

.div1 th:nth-child(2),
.div1 td:nth-child(2) {position: sticky;/* 1st cell left/right padding + 1st cell width + 1st cell left/right border width *//* 0 + 5 + 150 + 5 + 1 */left: 161px;width: 50px;min-width: 50px;
}

下一个单元格位置的计算是：边框宽度+ 填充 + 单元格宽度

在这种情况下，0左边框宽度+ 5px左填充 + 150px（第一个单元格宽度）+ 5px右填充） + 1px右边框宽度= 161px。

因此， left: 161px

接下来，当表格向右滚动时，非粘性单元格将与第一个和第二个冻结单元格碰撞并重叠。

为第一个和第二个冻结单元格提供背景颜色以解决重叠问题：

.div_maintb td:nth-child(1),
.div_maintb td:nth-child(2) {background: #ffebb5;
}

现在，前两个冻结的“TH”和“TD”都“sticky”了。由于“TD”是在“TH”之后创建的，所以当向下滚动表格时，“TD”会一直停留在顶部，将“TH”覆盖，使“TH”隐藏在“TD”之下。

因此，我们可以设置"TH"的"z-index"的CSS值来覆盖将其置于前面/顶部的层，这样"TD"现在将位于"TH"的下方/后面。

默认情况下，所有元素的默认值为“z-index=0”。

.div1 th:nth-child(1),
.div1 th:nth-child(2) {z-index: 2;
}

https://www.codeproject.com/Articles/5320138/HTML-Table-Freeze-Row-and-Column-with-CSS

HTML表格——使用CSS冻结行和列相关推荐

java冻结行列,poi冻结行和列 - osc_0k23td2u的个人空间 - OSCHINA - 中文开源技术交流社区...
在poi中提供了一个Sheet.createFreezePane()方法用于冻结行和列. @param colSplit Horizonatal position of split. @param r ...
UltraWebGrid 冻结行和列效果以及出现的问题
前台属性 StationaryMargins="Header" 和TableLayout="Fixed" <DisplayLayout AutoGener ...
Python 使用 pandas 和 openpyxl 读取 excel 表格（读取指定行和列）
前言在使用Python处理表格时,pandas 和 openpyxl是使用最多的两个库.现在我来简单记录一下这两个库在处理Excel表格时一些常用操作. 1.使用pandas操作excel表格 (1 ...
html表格table冻结行和列
2019独角兽企业重金招聘Python工程师标准>>> 转自http://liyinlei.iteye.com/blog/2077714 这种固定行列的方式只适用于IE,并且只适用于 ...
扩展gridview轻松实现冻结行和列
在实际的项目中,由于项目的需要,数据量比较大,同时显示栏位也比较多,要做gridview里显示完整,并做到用户体验比较好,这就需要冻结表头和关键列.由于用到的地方比较多,我们可以护展一个gridvie ...
使用jquery实现table表格的动态添加行和列
<table class="table" border="1px" cellspacing="0" cellpadding=" ...
excel同时冻结行和列
http://jingyan.baidu.com/article/5225f26b06035ce6fa09080d.html 转载于:https://www.cnblogs.com/boot/p/59 ...
java 表格列删除_Java 删除Excel表格中的空白行或列
Java 删除Excel表格中的空白行和列本文介绍在Java程序中如何来删除Excel表格中多余的空白行或者列. 使用工具:Free Spire.XLS for Java (免费版) Jar获取及导 ...
mysql冻结某一列_jQuery 实现冻结表格行和列
1.创建多个div,div之间通过css实现层叠,每个div放置当前表格的克隆.例如:需要行冻结时,创建存放冻结行表格的div,通过设置z-index属性和position属性,让冻结行表格在数据表格 ...
Excel 冻结窗格 - 锁定表格行和列
Excel 冻结窗格 - 锁定表格行和列在 Excel 中,冻结窗格用于实现锁定表格行和列的功能. 如果表格的行数/列数较多时,一旦滚动屏幕,则标题行/列跟着滚动,在处理数据时难以分清各行/列数据对 ...

HTML表格——使用CSS冻结行和列

介绍

例子

使用代码

解释

样式表

样式化TH（标题）

冻结第1列

冻结第2列

HTML表格——使用CSS冻结行和列相关推荐

最新文章

热门文章