最简单的固定表格列实现

news2024/11/26 0:52:23

ref: https://dev.to/nicolaserny/table-with-a-fixed-first-column-2c5b

假设我们现在有这样一个表格

  <table>
    <thead>
      <tr>
        <th>姓名</th>
        <th>性别</th>
        <th>民族</th>
        <th>年龄</th>
        <th>籍贯</th>
      </tr>
    </thead>
    <tbody>
      <tr>
        <td>夏依然</td>
        <td></td>
        <td></td>
        <td>25</td>
        <td>四川成都</td>
      </tr>
      <tr>
        <td>郭丹</td>
        <td></td>
        <td>穿青人</td>
        <td>32</td>
        <td>四川丹棱</td>
      </tr>
      <tr>
        <td>阿说伍叁</td>
        <td></td>
        <td></td>
        <td>20</td>
        <td>四川喜德</td>
      </tr>
      <tr>
        <td>塔瑞克·加尼尤</td>
        <td></td>
        <td></td>
        <td>25</td>
        <td>北京</td>
      </tr>
      <tr>
        <td>爱新觉罗·玄烨</td>
        <td></td>
        <td></td>
        <td>30</td>
        <td>北京</td>
      </tr>
    </tbody>
  </table>

我们得到这样一个表格:

在这里插入图片描述

我们的需求是固定第一列,首先,我们使用overflow-x: auto使横向滚动条出现。

注意: 该属性适用元素为block/flex/grid元素

我们使用 divtable包裹起来,然后对这个div使用overflow-x属性:

<div class="container">
    <table>
      ...
    </table>
  </div>
.container {
  overflow-x: auto;
}

表格横向滚动的时候,我们使用粘性定位将第一列固定在左侧:

    .container {
      max-width: 250px;
      overflow-x: auto;
    }

    table {
      width: 100%;
      white-space: nowrap;
    }

    tr>th:first-child,
    tr>td:first-child {
      position: sticky;
      left: 0;
    }

效果如下:

在这里插入图片描述

但是拖动后会出现如下问题(文字重叠):

在这里插入图片描述

为了解决这个问题,我们需要使单元格具有背景,增加如下css:

...
    tr:nth-child(odd) td {
      background: #fff;
    }

    tr:nth-child(even) td,
    th {
      background: #e2e8f0;
    }

效果:
在这里插入图片描述

拖动后:
在这里插入图片描述

本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如若转载,请注明出处:http://www.coloradmin.cn/o/785052.html

如若内容造成侵权/违法违规/事实不符,请联系多彩编程网进行投诉反馈,一经查实,立即删除!

相关文章

好用的敏捷开发项目管理工具有哪些?这3款真的绝绝子!

随着数字化的转型和企业团队成员不断追求高效的工作效率&#xff0c;越来越多优质的敏捷开发项目管理工具&#xff0c;深受广大管理者的青睐。今天我将通过这篇文章为大家介绍3款非常好用的开发项目管理工具&#xff0c;建议收藏起来&#xff01; ​ 1.boardmix boardmix博思…

Jmeter 中 Beanshell 的使用

目录 前言&#xff1a; Beanshell 介绍 常用内置变量 log vars 和 props vars 常用方法&#xff1a; props 常用方法&#xff1a; prev 综合运用 前言&#xff1a; JMeter 是一个广泛使用的性能测试工具&#xff0c;它支持许多不同的测试技术和方法。其中&#xff0c…

浏览器协议TCP详解

浏览器协议TCP详解 浏览器进程负责存储、界面、下载等管理。在渲染进程中&#xff0c;运行着熟知的主线程、合成线程、JavaScript 解释器、排版引擎等。 浏览器进程处理用户在地址栏的输入&#xff0c;然后将 URL 发送给网络进程。网络进程发送 URL 请求&#xff0c;在接收到响…

【Yolov8自动标注数据集完整教程】

Yolov8自动标注数据集完整教程 1 前言2 先手动标注数据集&#xff0c;训练出初步的检测模型2.1 手动标注数据集2.2 Yolov8环境配置2.2.1 Yolov8下载2.2.2 Yolov8环境配置 2.3 Yolov8模型训练&#xff0c;得到初步的检测模型2.3.1 训练方式 3 使用初步的检测模型实现自动数据集标…

STM32 I2C OVR 错误

一、问题 STM32 I2C 用作从机时&#xff0c;开启如下中断并启用 callback 回调函数。 每一次复位后&#xff0c;从机都可以正常触发地址匹配中断ADDR&#xff0c;之后在该中断的回调函数中启用接收中断去收取数据时&#xff0c;却无法进入RXNE中断&#xff0c;而是触发了 OVR …

《数据分析-JiMuReport08》JiMuReport报表开发-报表列数量开发限制调整

JiMuReport报表开发列数量限制调整 1.开发列数限制 JiMuReport报表在开发的时候&#xff0c;需要100-200列的数据&#xff0c;但是在设计到一定数量的时候&#xff0c;水平下拉框就不能滑动了 2.报表参数调整 col: n 在application.yml文件的jmreport配置处&#xff0c;如果想…

【C++】特殊类的设计 | 类型转换

文章目录 1. 特殊类的设计单例模式饿汉模式具体代码 懒汉模式具体代码 懒汉模式和饿汉模式的优缺点 2. C的类型转换C语言的类型转换C的类型转换static_castreinterpret_castconst_castdynamic_cast 1. 特殊类的设计 单例模式 设计模式是 被反复使用 多数人知晓 经过分类的、代…

【Docker】Docker中容器之间通信方式

文章目录 1. Docker容器之间通信的主要方式1.1 通过容器ip访问1.2. 通过宿主机的ip:port访问1.3. 通过link建立连接&#xff08;官方不推荐使用&#xff09;1.4. 通过 User-defined networks&#xff08;推荐&#xff09; 2. 参考资料 1. Docker容器之间通信的主要方式 1.1 通…

OpenCV图像处理-视频分割静态背景-MOG/MOG2/GMG

视频分割背景 1.概念介绍2. 函数介绍MOG算法MOG2算法GMG算法 原视频获取链接 1.概念介绍 视频背景扣除原理&#xff1a;视频是一组连续的帧&#xff08;一幅幅图组成&#xff09;&#xff0c;帧与帧之间关系密切(GOP/group of picture)&#xff0c;在GOP中&#xff0c;背景几乎…

前端面试题汇总大全!

文章目录 前端面试题汇总大全&#xff08;含答案超详细&#xff09;-- 持续更新一、HTML 篇1.xhtml和html有什么区别2.行内元素有哪些&#xff1f;块级元素有哪些&#xff1f; 空(void)元素有那些&#xff1f;行内元素和块级元素有什么区别3. 简述一下你对 HTML 语义化的理解&a…

sql进阶 之case表达式

case表达式 CASE表达式是SQL里非常重要而且使用起来非常便利的技术&#xff0c;我们应该学会用它来描述条件分支。本节将通过行列转换、已有数据重分组&#xff08;分类&#xff09;、与约束的结合使用、针对聚合结果的条件分支等例题&#xff0c;来介绍CASE表达式的用法。标红…

在 3dsmax 中创建电影场景

推荐&#xff1a; NSDT场景编辑器助你快速搭建可二次开发的3D应用场景 有时&#xff0c;通过简单的图像和简单的技术&#xff0c;我们可以创建有效的输出。在本教程中&#xff0c;您将学习如何在 3ds max 中使用三个简单图像创建电影场景。 步骤-1 让我们在 photoshop 中为场…

Java 二维码生成解析

生成二维码需要两个jar包 Download core JAR 3.5.1 ➔ With all dependencies! Download javase JAR 3.5.1 ➔ With all dependencies! 将下载后的jar包添加项目依赖 import com.google.zxing.*; import com.google.zxing.client.j2se.MatrixToImageWriter; import com.googl…

具身智能,是机器人的“冷饭热炒”吗?

大模型正如火如荼&#xff0c;下一个AI风口就来了。 如果你关注2023世界人工智能大会等行业峰会&#xff0c;以及英伟达、微软、谷歌、特斯拉和国內科技大厂的最新发布会&#xff0c;除了“大模型”&#xff0c;应该会听到另一个高频词——具身智能。 所谓具身智能Embodied AI …

【运维】 第05课:Curl 命令最常见使用方式及案例

本课时我们主要了解 Curl 命令的使用和常见案例。在学习本课时的内容之前&#xff0c;你需要先了解 HTTP 的请求过程&#xff0c;以及 Linux 操作系统的基础知识。 首先&#xff0c;我们先来介绍一下 Curl &#xff0c;Curl 是一个Linux命令行中的工具&#xff0c;它模拟客户端…

JAVA解析EXCEL(JExcelAPI,POI,EasyExcel)

前言 文章目录 前言JExcelAPIDemo POIHSSFWorkBookXSSFWorkBookDemo SXSSFWorkBookDemo XSSFReaderDemo EasyExcelDemo demo代码&#xff1a;https://github.com/RwTo/excel-demo JAVA解析Excel 一般有三种方式 JExcelAPI POI EasyExcel JExcelAPI 官网&#xff1a;https://je…

centos安装psql客户端

前言&#xff1a;postgresql数据库采用docker部署&#xff0c;想在宿主机测试访问或数据库备份&#xff0c;则需要安装postgresql客户端&#xff0c;即psql命令 环境&#xff1a;centos7&#xff0c;x86&#xff0c;yum 下面以 postgresql-11 为例 安装镜像 yum install htt…

探索 APK 文件的内部:了解 Android 应用程序的组织结构

I. 什么是 APK 文件 APK (Android application package) 是构建和发布 Android 应用程序的关键组成部分&#xff0c;APK 文件是应用程序的打包格式&#xff0c;它将应用程序的代码、资源和清单信息组合在一起&#xff0c;以便在设备上进行安装和运行。 简称 ”安装包“&#…

Linux系统安装部署Jenkins详细教程(图文讲解)

前言&#xff1a;最近需要使用Jenkins部署项目&#xff0c;所以想出一篇关于如何使用Linux系统安装部署Jenkins的相关教程&#xff0c;整体部署过程还是挺顺利的&#xff0c;特此分享一下&#xff01; 目录 一、安装JDK11和Tomcat11 二、准备Jenkins安装包 三、部署Jenkins…

云端环境跑通BaseLine

云端环境跑通BaseLine 一、实验流程实践 1.报名 报名日期&#xff1a;2023年7月17日&#xff0c;参与AI夏令营第一期 彳 z h i 亍 c h u &#xff0c;都为第四声 \overset{zhi}{彳}\overset{chu}{亍}&#xff0c;都为第四声 彳zhi亍chu&#xff0c;都为第四声 怎么报名的&a…