HTML表格 |
您所在的位置：网站首页 › 表格冻结首行是什么意思 › HTML表格 |
HTML表格
|
目录 介绍 例子 使用代码 解释 样式表 样式化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为例： Column 1 Column 2 Column 3 Column 4 Column 5 Column 6 Row Data 1 Row Data 2 Row Data 3 Row Data 4 Row Data 5 Row Data 6 Row Data 1 Row Data 2 Row Data 3 Row Data 4 Row Data 5 Row Data 6 Row Data 1 Row Data 2 Row Data 3 Row Data 4 Row Data 5 Row Data 6这是具有魔力的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
|
【本文地址】
今日新闻 |
推荐新闻 |