整合营销服务商

电脑端+手机端+微信端=数据同步管理

免费咨询热线:

(首列冻结)通过CSS来实现HTML表格的固定首列和横向滚动效果

方法一:sticky 方式

核心样式

        .pure-table-wrapper-div {
            overflow-x: scroll;
        }
    
        table.pure-table th:first-child,
        table.pure-table td:first-child {
            position: sticky;
            left: 0;
            z-index: 1;
            background-color: aliceblue;
        }

解释

.pure-table-wrapper-div:

这个类名应用于包裹表格的 div 元素。它的样式规则如下:

overflow-x: scroll;: 当内容宽度超出容器宽度时,显示水平滚动条。这允许用户在需要时水平滚动查看表格的所有列。


示例 HTML 结构:


<div class="pure-table-wrapper-div"> <table class="pure-table"> <!-- 表格内容 --> </table> </div>


table.pure-table th:first-child, table.pure-table td:first-child: 这两个选择器分别针对 .pure-table 类的表格中的第一个表头单元格(<th>)和第一个数据单元格(<td>)。


它们定义的样式规则如下:


position: sticky;: 使用黏性定位。黏性定位元素在滚动时会根据设置的 top、bottom、left 或 right 属性值在特定位置 "粘附"。在本例中,由于定义了 left: 0;,这些元素会在左侧边缘粘附。 left: 0;: 在元素滚动到视口左侧边缘时使其粘附。与 position: sticky; 结合使用。


z-index: 1;: 设置元素的堆叠顺序。值越大,元素越靠前。在这种情况下,将第一个单元格设置为 z-index: 1 可确保它在其他表格单元格之上。


background-color: aliceblue;: 为匹配的单元格设置背景颜色。这可以增强视觉效果,使粘附的单元格与其他单元格区分开。

这段 CSS 代码的主要目的是实现表格的水平滚动,并固定第一列,使其在水平滚动时保持可见。同时,为第一列的单元格设置了背景颜色以增强视觉效果。


总的来说是:


使用 position: sticky; 来固定第一列。在 table.pure-table th:first-child 中设置了 position: sticky; 和 left: 0;,并将 z-index 设为 1,以确保第一列在滚动时会固定在屏幕上方。

完整代码

<!DOCTYPE html>
<html lang="zh-CN">

<head>
    <meta charset="UTF-8">
    <link rel="stylesheet" href="./purecss@3.0.0.css">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>文档</title>
    <style>
        .pure-table-wrapper-div {
            overflow-x: scroll;
        }
    
        table.pure-table th:first-child,
        table.pure-table td:first-child {
            position: sticky;
            left: 0;
            z-index: 1;
            background-color: aliceblue;
        }
    </style>
</head>

<body>
    <div class="pure-table-wrapper-div">
        <table class="pure-table">
            <thead>
                <tr>
                    <th>#</th>
                    <th>品牌</th>
                    <th>型号</th>
                    <th>随机字符串</th>
                    <th>说明</th>
                </tr>
            </thead>
            <tbody>
                <tr>
                    <td>1</td>
                    <td>本田</td>
                    <td>雅阁</td>
                    <td>2009-QWERTYUIOPASDFGHJKLZXCVBNM</td>
                    <td>这是一段中文说明文字。</td>
                </tr>
                <tr>
                    <td>2</td>
                    <td>丰田</td>
                    <td>凯美瑞</td>
                    <td>2012-QWERTYUIOPASDFGHJKLZXCVBNM</td>
                    <td>这是一段中文说明文字。</td>
                </tr>
                <tr>
                    <td>3</td>
                    <td>现代</td>
                    <td>领动</td>
                    <td>2010-QWERTYUIOPASDFGHJKLZXCVBNM</td>
                    <td>这是一段中文说明文字。</td>
                </tr>
            </tbody>
        </table>
    </div>
</body>

</html>

中文不换行

要去除表格中最后一列中文的换行效果,可以使用 CSS 的 white-space 属性,将其设置为 nowrap,这样文字就不会自动换行了。

添加了以下 CSS 样式:

table.pure-table td:last-child,
table.pure-table th:last-child {
    white-space: nowrap;
}

这样,最后一列中文就不会自动换行了。其中 table.pure-table td:last-child 和 table.pure-table th:last-child 选择器用于指定表格中的最后一列单元格,white-space: nowrap; 则是将 white-space 属性设置为 nowrap,禁止其自动换行。

小结

position: sticky 是 CSS 中的一种定位方式,可以实现元素在滚动时固定在屏幕上,直到其滚动到指定位置。相对于 position: fixed,position: sticky 有以下优点和缺点:

优点:

  1. 不会脱离文档流,因此不会影响其他元素的布局和位置;
  2. 可以在页面滚动到指定位置时自动固定,无需手动计算位置;
  3. 可以在滚动到指定位置后自动取消固定,不会一直占据屏幕空间,避免了 position: fixed 的潜在问题;
  4. 可以在固定元素上设置 z-index 属性,与其他元素进行层级控制。

缺点:

  1. 兼容性问题:position: sticky 不是所有浏览器都支持,特别是在 IE11 及以下版本中不支持;
  2. 在某些情况下可能会存在性能问题,尤其是在滚动时固定的元素较多时,可能会导致卡顿和性能下降;
  3. 在某些情况下可能会存在滚动到指定位置时出现抖动的问题,需要通过对元素和容器的尺寸、位置等进行调整来解决。

综上所述,position: sticky 是一种灵活且易用的定位方式,具有很多优点,但在兼容性和性能方面有一些缺点需要注意。如果要在项目中使用 position: sticky,需要在兼容性和性能方面进行综合考虑,以确保其正常运行和良好的用户体验。

【兼容性好】postion 的 absolute 方式【需要指定首列宽度】

核心样式

        .pure-table-wrapper-div {
            overflow-x: scroll;
            margin-left: 5em;
        }
      
        table.pure-table tr td:first-child,
        table.pure-table tr th:first-child {
            position: absolute;
            width: 5em;
            left: 0;
        }

解释

这段 CSS 代码主要是为了实现固定表格首列和横向滚动效果,并且在表格首列添加了固定的宽度。

首先,.pure-table-wrapper-div 是一个包裹表格的 div 元素,通过设置 overflow-x: scroll,实现了横向滚动的效果。同时,通过设置 margin-left: 5em,在左侧添加了 5em 的空白,使得表格不会紧贴在页面最左侧,美观性更好。

接着,table.pure-table tr td:first-child 和 table.pure-table tr th:first-child 选择器用于选中表格中的第一列单元格,使用 position: absolute 将其从文档流中脱离,并使用 width: 5em 指定其宽度为 5em,然后通过 left: 0 将其固定在表格最左侧。

这样,表格的首列就被固定在了左侧,不会随着表格的滚动而移动,同时也添加了固定的宽度,使得表格整体更加美观和易读。

总的来说,这段 CSS 代码实现了表格的固定首列和横向滚动效果,同时也为表格首列添加了固定的宽度,提高了表格的可读性和美观性。

完整代码

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <link rel="stylesheet" href="./purecss@3.0.0.css">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>

<body>
    <style>
        .pure-table-wrapper-div {
            overflow-x: scroll;
            margin-left: 5em;
        }
      
        table.pure-table tr td:first-child,
        table.pure-table tr th:first-child {
            position: absolute;
            width: 5em;
            left: 0;
        }
    </style>
    <div class="pure-table-wrapper-div">
        <table class="pure-table">
            <thead>
                <tr>
                    <th>#</th>
                    <th>Make</th>
                    <th>Model</th>
                    <th>随机数</th>
                </tr>
            </thead>
            <tbody>
                <tr>
                    <td>1</td>
                    <td>Honda</td>
                    <td>Accord</td>
                    <td>2009-QWERTYUIOPASDFGHJKLZXCVBNM</td>
                </tr>
                <tr>
                    <td>2</td>
                    <td>Toyota</td>
                    <td>Camry</td>
                    <td>2012-QWERTYUIOPASDFGHJKLZXCVBNM</td>
                </tr>
                <tr>
                    <td>3</td>
                    <td>Hyundai</td>
                    <td>Elantra</td>
                    <td>2010-QWERTYUIOPASDFGHJKLZXCVBNM</td>
                </tr>
            </tbody>
        </table>
    </div>
</body>

</html>

小结

CSS 中的 position: absolute 定位方式可以让元素脱离文档流,并相对于它的最近的非 static 定位祖先元素进行定位。相对于其他定位方式,position: absolute 有以下优点和缺点:

优点:

  1. 可以精确控制元素的位置,可以在任何位置放置元素;
  2. 可以与其他元素重叠,实现复杂的布局效果;
  3. 可以让元素脱离文档流,不会影响其他元素的布局和位置;
  4. 可以通过设置 z-index 属性进行层级控制。

缺点:

  1. 不会占据原来的空间,可能会导致其他元素填补其位置,影响页面布局;
  2. 定位时需要手动指定位置,不如其他定位方式使用方便;
  3. 在某些情况下,可能会出现元素位置计算错误的问题,需要仔细调整位置和尺寸。

综上所述,position: absolute 是一种灵活且强大的定位方式,可以实现很多独特的布局效果,但需要注意它可能会对页面布局和元素位置产生影响。在使用时,需要根据具体情况进行综合考虑,并在保证页面布局和元素位置正确的前提下,尽可能地利用其优点实现更好的页面效果。

SS层叠样式表(Cascading Style Sheets)是一种用来表现HTML(标准通用标记语言的一个应用)或XML(标准通用标记语言的一个子集)等文件样式的计算机语言。CSS不仅可以静态地修饰网页,还可以配合各种脚本语言动态地对网页各元素进行格式化。 CSS 能够对网页中元素位置的排版进行像素级精确控制,支持几乎所有的字体字号样式,拥有对网页对象和模型样式编辑的能力。

在研究前端性能时,我们是希望页面能逐步地加载的,也就是说我们希望浏览器能够尽快显示内容,而不是等到所有页面加载完成后才开始显示内容,这对于有很多内容的页面以及Internet连接慢的用户来说尤其重要。也即是为用户提供可视化的反馈的重要性,在可用性的概念中详细的阐述了从进度指示器的角度强调可视化反馈的重要性。

进度指示器有以下三个方面的优势:

第一:可以让用户知道系统没有崩溃,只是正在为他或她解决问题;

第二:它们指出了用户大概还需要等多久可以加载完成,以便用户能够在漫长的等待中做些其它的事情;

第三:能给用户提供一些可以看的东西,使用得等待不再是那么无聊。

当然在我们讨论前端性能时,HTML页面就是进度指示器,当浏览器逐步地加载页面时,页头、导航栏、顶部LOGO等,这些都会为等待页厕所用户提供视觉反馈,这样可以改善整体用户体验。

那么如果将样式放在文档底部是,就会禁止浏览器进行渐进式呈现,这样会浏览器会阻止渲染,这样用户会停留在空白页面,我们将其称之为“白屏”。为了避免“白屏”,应该将样式放在文档顶部的HEAD中,经过这样修改后的示例网站称之为“CSS at the Top”,这样不管页面是如何加载的,页面都会逐步呈现。

次,我们来讲解应用 CSS 来装饰表格。

如何制作一个表格,我们在HTML课程中已经学习过了。现在,我们通过样式,让表格变得更加美观易用。

首先来学习如何定义表格边框。

要在CSS中指定表格的边框,可以使用 border 属性。我们来举个例子。

创建 tables.html 文件和 tables-style.css 文件。在 html 里构建基础代码,引入外部样式。

在 body 里编写 emmet 命令:table>(tr>th*2)+(tr>td*2)*3,填入一些文本。

HTML
<table>
    <tr>
      <th>千锋名师</th>
      <th>最新作品</th>
    </tr>
    <tr>
      <td>浠浠呀</td>
      <td>《HTML+CSS前端入门》</td>
    </tr>
    <tr>
      <td>陆荣涛</td>
      <td>《Vite学习指南》</td>
    </tr>
    <tr>
      <td>Kerwin</td>
      <td>《Vue2+Vue3全套教程》</td>
    </tr>
  </table>

在浏览器里预览效果:表格的结构有了,还没有边框。大家还记得如何通过 html 属性定义边框吗?可以评论上告诉我。

现在,我们通过样式来给表格添加边框。定义群组选择器 table, th, td,声明样式:border: 1px solid。

再看效果,表格线出现了,可是外观上看,线条有点粗。是因为 table、th和td元素都有独立的边框。

CSS
table, th, td {
  border: 1px solid;
}

可以应用 border-collapse 属性,把表格的边框折叠成一个单一的边框。

回到 CSS,再给 table 元素声明样式:border-collapse: collapse。

此时,表格线变细了。

CSS
table {
  border-collapse: collapse;
}

当前表格看起来很小,如果我们需要一个横跨整个屏幕的表格,该如何实现呢?

回到CSS,再给 table 添加样式 width: 100%。

再看一下效果,表格横向撑满了整个屏幕。

接下来,我们来定义表格的宽度和高度。

width 和 height 属性用来定义表格的宽度和高度。我们来实验一下。

将 table 的 width 属性修改为 50%,再给 th 声明样式 height: 70px。

我们看,表格宽度缩小了一半,同时表头的高度也变大到 70px 了。

接下来,我们来设置表格的对齐方式。

text-align 属性用来设置 th 或 td 中内容的水平对齐方式,如居左、居右或居中对齐。默认情况下,th 元素的内容是居中对齐的,td 元素的内容是左对齐的。要使 td 元素的内容也居中对齐,可以使用text-align: center。举个例子:

回到CSS,给 td 添加样式:text-align: center。

此时,全部 td 里的内容在单元格里水平居中显示了。

要使内容左对齐,可以使用 text-align: left 属性。

比如将 th 元素的对齐方式改为左对齐。

CSS
th {
  height: 70px;
  text-align: left;
}

vertical-align 属性用来设置 th 或 td 中内容的垂直对齐方式。如顶部对齐、底部对齐或中间对齐。默认情况下,对于 th 和 td 元素,表格中内容的垂直对齐方式是中间对齐。举个例子:

回到 CSS,给 td 添加样式:height: 50px,vertical-align: bottom。

我们看, td 单元格里的内容垂直底部对齐了。

接下来,给表格添加内填充、水平分隔线、鼠标滑过高亮及颜色等样式。

要控制表格中边框和内容之间的空间,可以给 td 和 th 元素设置 padding 属性。

回到 CSS,先注释掉 th 和 td 的样式。定义选择器 th, td,声明样式:padding: 15px,text-align: left。

CSS
th, td {
  padding: 15px;
  text-align: left;
}

看一下效果,内容和边框线之间就具有了 15px 的填充。

接下来通过给 th 和 td 添加 border-bottom 属性,实现表格的水平分隔线效果。

注释掉原有的 border 属性,给 th 和 td 添加样式:border-bottom: 1px solid #ddd。

CSS
table, th, td {
  /* border: 1px solid; */
}
th, td {
  padding: 15px;
  text-align: left;
  border-bottom: 1px solid #ddd;
}

我们看,水平分隔线的表格效果就实现了。

在 tr 上使用 :hover 选择器,在鼠标移过时突出显示表格的行。

回到CSS,定义选择器 tr:hover,声明样式:background-color: coral。kerou

当鼠标滑过每一行时,当前行就高亮显示了。

我们也可以专门给某一行添加背景色,比如给 th 添加一个绿色背景。

再单独给 th 定义样式:background-color: #04AA6D,color: white;

CSS
th {
  background-color: #04AA6D;
  color: white;
}

这样,通过给 th 添加背景色,使表头的显示更加醒目了。

本文配套教程链:https://www.bilibili.com/video/BV1oU4y1278g?p=101