使用css固定table第一列

.table{width:100%;overflow-x: scroll;background-color:#7c95b5;}

.fixedTable{width:160%;text-align: center;color:#fff;font-size:14px; border-collapse:collapse;}

.fixedTable tr{line-height: 30px;border:1px solid #fff;}

.fixedTable tr:first-child{height:40px;line-height: 40px;background-color:cadetblue;}

.fixedTable td:first-child{position:absolute;width:105px;background-color:cadetblue;border:1px solid #fff;margin:-1px 0px 0px -1px;}

.fixedColumn{width:99px;}
<html>
    <head>
        <meta name="viewport" content="width=device-width,height=device-height,initial-scale=1.0,user-scalable=no">
        <meta charset="utf-8">
        <title>使用css固定table第一列title>
        <link href="css/table.css" rel="stylesheet"/>
    head>
    <body>
        <div class="table">
        <table class="fixedTable" border="1">
            <tr><td>固定列td><td class="fixedColumn">td><td>第一列td><td>第二列td><td>第三列td><td>第四列td><td>第五列td><td>第六列td><td>第七列td>tr>
            <tr><td>固定列td><td class="fixedColumn">td><td>1td><td>2td><td>3td><td>4td><td>5td><td>6td><td>7td>tr>
            <tr><td>固定列td><td class="fixedColumn">td><td>1td><td>2td><td>3td><td>4td><td>5td><td>6td><td>7td>tr>
            <tr><td>固定列td><td class="fixedColumn">td><td>1td><td>2td><td>3td><td>4td><td>5td><td>6td><td>7td>tr>
            <tr><td>固定列td><td class="fixedColumn">td><td>1td><td>2td><td>3td><td>4td><td>5td><td>6td><td>7td>tr>
            <tr><td>固定列td><td class="fixedColumn">td><td>1td><td>2td><td>3td><td>4td><td>5td><td>6td><td>7td>tr>
            <tr><td>固定列td><td class="fixedColumn">td><td>1td><td>2td><td>3td><td>4td><td>5td><td>6td><td>7td>tr>
            <tr><td>固定列td><td class="fixedColumn">td><td>1td><td>2td><td>3td><td>4td><td>5td><td>6td><td>7td>tr>
            <tr><td>固定列td><td class="fixedColumn">td><td>1td><td>2td><td>3td><td>4td><td>5td><td>6td><td>7td>tr>
            <tr><td>固定列td><td class="fixedColumn">td><td>1td><td>2td><td>3td><td>4td><td>5td><td>6td><td>7td>tr>
            <tr><td>固定列td><td class="fixedColumn">td><td>1td><td>2td><td>3td><td>4td><td>5td><td>6td><td>7td>tr>
            <tr><td>固定列td><td class="fixedColumn">td><td>1td><td>2td><td>3td><td>4td><td>5td><td>6td><td>7td>tr>
            <tr><td>固定列td><td class="fixedColumn">td><td>1td><td>2td><td>3td><td>4td><td>5td><td>6td><td>7td>tr>
            <tr><td>固定列td><td class="fixedColumn">td><td>1td><td>2td><td>3td><td>4td><td>5td><td>6td><td>7td>tr>
            <tr><td>固定列td><td class="fixedColumn">td><td>1td><td>2td><td>3td><td>4td><td>5td><td>6td><td>7td>tr>
            <tr><td>固定列td><td class="fixedColumn">td><td>1td><td>2td><td>3td><td>4td><td>5td><td>6td><td>7td>tr>
            <tr><td>固定列td><td class="fixedColumn">td><td>1td><td>2td><td>3td><td>4td><td>5td><td>6td><td>7td>tr>
            <tr><td>固定列td><td class="fixedColumn">td><td>1td><td>2td><td>3td><td>4td><td>5td><td>6td><td>7td>tr>
            <tr><td>固定列td><td class="fixedColumn">td><td>1td><td>2td><td>3td><td>4td><td>5td><td>6td><td>7td>tr>
            <tr><td>固定列td><td class="fixedColumn">td><td>1td><td>2td><td>3td><td>4td><td>5td><td>6td><td>7td>tr>
            <tr><td>固定列td><td class="fixedColumn">td><td>1td><td>2td><td>3td><td>4td><td>5td><td>6td><td>7td>tr>
            <tr><td>固定列td><td class="fixedColumn">td><td>1td><td>2td><td>3td><td>4td><td>5td><td>6td><td>7td>tr>
            <tr><td>固定列td><td class="fixedColumn">td><td>1td><td>2td><td>3td><td>4td><td>5td><td>6td><td>7td>tr>
            <tr><td>固定列td><td class="fixedColumn">td><td>1td><td>2td><td>3td><td>4td><td>5td><td>6td><td>7td>tr>
            <tr><td>固定列td><td class="fixedColumn">td><td>1td><td>2td><td>3td><td>4td><td>5td><td>6td><td>7td>tr>
            <tr><td>固定列td><td class="fixedColumn">td><td>1td><td>2td><td>3td><td>4td><td>5td><td>6td><td>7td>tr>
            <tr><td>固定列td><td class="fixedColumn">td><td>1td><td>2td><td>3td><td>4td><td>5td><td>6td><td>7td>tr>
            <tr><td>固定列td><td class="fixedColumn">td><td>1td><td>2td><td>3td><td>4td><td>5td><td>6td><td>7td>tr>
            <tr><td>固定列td><td class="fixedColumn">td><td>1td><td>2td><td>3td><td>4td><td>5td><td>6td><td>7td>tr>
            <tr><td>固定列td><td class="fixedColumn">td><td>1td><td>2td><td>3td><td>4td><td>5td><td>6td><td>7td>tr>
            <tr><td>固定列td><td class="fixedColumn">td><td>1td><td>2td><td>3td><td>4td><td>5td><td>6td><td>7td>tr>
            <tr><td>固定列td><td class="fixedColumn">td><td>1td><td>2td><td>3td><td>4td><td>5td><td>6td><td>7td>tr>
            <tr><td>固定列td><td class="fixedColumn">td><td>1td><td>2td><td>3td><td>4td><td>5td><td>6td><td>7td>tr>
            <tr><td>固定列td><td class="fixedColumn">td><td>1td><td>2td><td>3td><td>4td><td>5td><td>6td><td>7td>tr>
            <tr><td>固定列td><td class="fixedColumn">td><td>1td><td>2td><td>3td><td>4td><td>5td><td>6td><td>7td>tr>
        table>
        div>
    body>
html>

适用移动端

代码地址：https://github.com/guyingguang/fixed_first_column

CSS前端html固定第一列table

相关

html标签

DOM修改 使用DOM操作CSS

Java web开发：从零到 Run 一个现有的 Spring Boot 前后端分离项目（前端Vue）

HTML和CSS

1.css布局技巧

Scss支持多主题切换的方案实现

google icons 的使用 和 css 设置图标为 loading 状态

nodejs 一个简单的web服务器，用于前端自己快速测试部署

深入理解前端跨域方法和原理

【前端单元测试入门04】Karma

HTML表单

node-scss npm的时候报错

标签