当前位置: 首页 > article >正文

html固定头和第一列简单例子

<!DOCTYPE html>
<html lang="zh">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>冻结第一行和第一列的表格</title>
    <style>
        /* 外层容器 */
        .table-container {
            width: 100%;
            height: 300px; /* 设置高度,显示纵向滚动条 */
            overflow: auto; /* 显示滚动条 */
            position: relative;
        }

        table {
            border-collapse: collapse;
            width: 100%;
            min-width: 800px; /* 设置最小宽度,显示横向滚动条 */
        }

        th, td {
            border: 1px solid #ddd;
            padding: 8px;
            text-align: center;
        }

        /* 冻结第一行 */
        thead {
            position: sticky;
            top: 0;
            background-color: #f1f1f1;
            z-index: 2;
        }

        /* 冻结第一列 */
        td, th {
            position: relative;
        }

        td:first-child, th:first-child {
            position: sticky;
            left: 0;
            background-color: #f1f1f1;
            z-index: 1;
        }
    </style>
</head>
<body>

<div class="table-container">
    <table>
        <thead>
            <tr>
                <th>姓名</th>
                <th>年龄</th>
                <th>城市</th>
                <th>职业</th>
                <th>邮箱</th>
                <th>电话</th>
            </tr>
        </thead>
        <tbody>
            <tr>
                <td>张三</td>
                <td>28</td>
                <td>北京</td>
                <td>工程师</td>
                <td>zhangsan@example.com</td>
                <td>1234567890</td>
            </tr>
            <tr>
                <td>李四</td>
                <td>34</td>
                <td>上海</td>
                <td>设计师</td>
                <td>lisi@example.com</td>
                <td>2345678901</td>
            </tr>
            <tr>
                <td>王五</td>
                <td>25</td>
                <td>广州</td>
                <td>程序员</td>
                <td>wangwu@example.com</td>
                <td>3456789012</td>
            </tr>
            <tr>
                <td>赵六</td>
                <td>40</td>
                <td>深圳</td>
                <td>经理</td>
                <td>zhaoliu@example.com</td>
                <td>4567890123</td>
            </tr>
            <tr>
                <td>孙七</td>
                <td>29</td>
                <td>成都</td>
                <td>产品经理</td>
                <td>sqi@example.com</td>
                <td>5678901234</td>
            </tr>
            <tr>
                <td>钱八</td>
                <td>38</td>
                <td>杭州</td>
                <td>测试工程师</td>
                <td>qianba@example.com</td>
                <td>6789012345</td>
            </tr>
            <tr>
                <td>刘九</td>
                <td>45</td>
                <td>武汉</td>
                <td>销售</td>
                <td>liujiu@example.com</td>
                <td>7890123456</td>
            </tr>
<tr>
                <td>刘九</td>
                <td>45</td>
                <td>武汉</td>
                <td>销售</td>
                <td>liujiu@example.com</td>
                <td>7890123456</td>
            </tr>

<tr>
                <td>刘九</td>
                <td>45</td>
                <td>武汉</td>
                <td>销售</td>
                <td>liujiu@example.com</td>
                <td>7890123456</td>
            </tr>

<tr>
                <td>刘九</td>
                <td>45</td>
                <td>武汉</td>
                <td>销售</td>
                <td>liujiu@example.com</td>
                <td>7890123456</td>
            </tr>

<tr>
                <td>刘九</td>
                <td>45</td>
                <td>武汉</td>
                <td>销售</td>
                <td>liujiu@example.com</td>
                <td>7890123456</td>
            </tr>

<tr>
                <td>刘九</td>
                <td>45</td>
                <td>武汉</td>
                <td>销售</td>
                <td>liujiu@example.com</td>
                <td>7890123456</td>
            </tr>

<tr>
                <td>刘九</td>
                <td>45</td>
                <td>武汉</td>
                <td>销售</td>
                <td>liujiu@example.com</td>
                <td>7890123456</td>
            </tr>

<tr>
                <td>刘九</td>
                <td>45</td>
                <td>武汉</td>
                <td>销售</td>
                <td>liujiu@example.com</td>
                <td>7890123456</td>
            </tr>

<tr>
                <td>刘九</td>
                <td>45</td>
                <td>武汉</td>
                <td>销售</td>
                <td>liujiu@example.com</td>
                <td>7890123456</td>
            </tr>

        </tbody>
    </table>
</div>

</body>
</html>


http://www.kler.cn/a/450833.html

相关文章:

  • AttributeError: module ‘numpy‘ has no attribute ‘bool‘.
  • 使用Vue的props进行组件传递校验时出现 Extraneous non-props attributes的解决方案
  • 【文档搜索引擎】搜索模块的完整实现
  • ECharts散点图-气泡图,附视频讲解与代码下载
  • EasyExcel停更,FastExcel接力
  • 【FAQ】HarmonyOS SDK 闭源开放能力 — Vision Kit(2)
  • MySQL purged gtid是如何生成和维护的
  • Websocket客户端从Openai Realtime api Sever只收到部分数据问题分析
  • [OpenGL]使用TransformFeedback实现粒子效果
  • web-view在指定区域打开,不自动全屏
  • 天水月亮圈圈:舌尖上的历史与传承
  • 深度学习中,用损失的均值或者总和反向传播的区别
  • C# Main方法 和顶级语句详解
  • 【全网首发】台湾省模型数据“去水印“说明(3Dtiles和osgb格式),全台湾省的模型数据,全域无水印AI处理,支持所有模型格式
  • Android Framework 中的 AV/Camera 技术架构详解
  • Web 代理、爬行器和爬虫
  • #渗透测试#漏洞挖掘#红蓝攻防#护网#sql注入介绍09基于布尔值的SQL注入(Boolean-Based SQL Injection)
  • tryhackme-Cyber Security 101-Linux Shells(linux命令框)
  • Windows 11 安装 Dify 完整指南 非docker环境
  • 计算机网络——练习题
  • Windows 11 Web 项目常见问题解决方案
  • 2025考研加油!Jing也加油哦!
  • C++中类的【友元】详解
  • 每天40分玩转Django:实操图片分享社区
  • css 编写注意-1-命名约定
  • selenium执行js