.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>1</td><td>2</td><td>3</td><td>4</td><td>5</td><td>6</td><td>7</td></tr>

            <tr><td>固定列</td><td class="fixedColumn"></td><td>1</td><td>2</td><td>3</td><td>4</td><td>5</td><td>6</td><td>7</td></tr>

            <tr><td>固定列</td><td class="fixedColumn"></td><td>1</td><td>2</td><td>3</td><td>4</td><td>5</td><td>6</td><td>7</td></tr>

            <tr><td>固定列</td><td class="fixedColumn"></td><td>1</td><td>2</td><td>3</td><td>4</td><td>5</td><td>6</td><td>7</td></tr>

            <tr><td>固定列</td><td class="fixedColumn"></td><td>1</td><td>2</td><td>3</td><td>4</td><td>5</td><td>6</td><td>7</td></tr>

            <tr><td>固定列</td><td class="fixedColumn"></td><td>1</td><td>2</td><td>3</td><td>4</td><td>5</td><td>6</td><td>7</td></tr>

            <tr><td>固定列</td><td class="fixedColumn"></td><td>1</td><td>2</td><td>3</td><td>4</td><td>5</td><td>6</td><td>7</td></tr>

            <tr><td>固定列</td><td class="fixedColumn"></td><td>1</td><td>2</td><td>3</td><td>4</td><td>5</td><td>6</td><td>7</td></tr>

            <tr><td>固定列</td><td class="fixedColumn"></td><td>1</td><td>2</td><td>3</td><td>4</td><td>5</td><td>6</td><td>7</td></tr>

            <tr><td>固定列</td><td class="fixedColumn"></td><td>1</td><td>2</td><td>3</td><td>4</td><td>5</td><td>6</td><td>7</td></tr>

            <tr><td>固定列</td><td class="fixedColumn"></td><td>1</td><td>2</td><td>3</td><td>4</td><td>5</td><td>6</td><td>7</td></tr>

            <tr><td>固定列</td><td class="fixedColumn"></td><td>1</td><td>2</td><td>3</td><td>4</td><td>5</td><td>6</td><td>7</td></tr>

            <tr><td>固定列</td><td class="fixedColumn"></td><td>1</td><td>2</td><td>3</td><td>4</td><td>5</td><td>6</td><td>7</td></tr>

            <tr><td>固定列</td><td class="fixedColumn"></td><td>1</td><td>2</td><td>3</td><td>4</td><td>5</td><td>6</td><td>7</td></tr>

            <tr><td>固定列</td><td class="fixedColumn"></td><td>1</td><td>2</td><td>3</td><td>4</td><td>5</td><td>6</td><td>7</td></tr>

            <tr><td>固定列</td><td class="fixedColumn"></td><td>1</td><td>2</td><td>3</td><td>4</td><td>5</td><td>6</td><td>7</td></tr>

            <tr><td>固定列</td><td class="fixedColumn"></td><td>1</td><td>2</td><td>3</td><td>4</td><td>5</td><td>6</td><td>7</td></tr>

            <tr><td>固定列</td><td class="fixedColumn"></td><td>1</td><td>2</td><td>3</td><td>4</td><td>5</td><td>6</td><td>7</td></tr>

            <tr><td>固定列</td><td class="fixedColumn"></td><td>1</td><td>2</td><td>3</td><td>4</td><td>5</td><td>6</td><td>7</td></tr>

            <tr><td>固定列</td><td class="fixedColumn"></td><td>1</td><td>2</td><td>3</td><td>4</td><td>5</td><td>6</td><td>7</td></tr>

            <tr><td>固定列</td><td class="fixedColumn"></td><td>1</td><td>2</td><td>3</td><td>4</td><td>5</td><td>6</td><td>7</td></tr>

            <tr><td>固定列</td><td class="fixedColumn"></td><td>1</td><td>2</td><td>3</td><td>4</td><td>5</td><td>6</td><td>7</td></tr>

            <tr><td>固定列</td><td class="fixedColumn"></td><td>1</td><td>2</td><td>3</td><td>4</td><td>5</td><td>6</td><td>7</td></tr>

            <tr><td>固定列</td><td class="fixedColumn"></td><td>1</td><td>2</td><td>3</td><td>4</td><td>5</td><td>6</td><td>7</td></tr>

            <tr><td>固定列</td><td class="fixedColumn"></td><td>1</td><td>2</td><td>3</td><td>4</td><td>5</td><td>6</td><td>7</td></tr>

            <tr><td>固定列</td><td class="fixedColumn"></td><td>1</td><td>2</td><td>3</td><td>4</td><td>5</td><td>6</td><td>7</td></tr>

            <tr><td>固定列</td><td class="fixedColumn"></td><td>1</td><td>2</td><td>3</td><td>4</td><td>5</td><td>6</td><td>7</td></tr>

            <tr><td>固定列</td><td class="fixedColumn"></td><td>1</td><td>2</td><td>3</td><td>4</td><td>5</td><td>6</td><td>7</td></tr>

            <tr><td>固定列</td><td class="fixedColumn"></td><td>1</td><td>2</td><td>3</td><td>4</td><td>5</td><td>6</td><td>7</td></tr>

            <tr><td>固定列</td><td class="fixedColumn"></td><td>1</td><td>2</td><td>3</td><td>4</td><td>5</td><td>6</td><td>7</td></tr>

            <tr><td>固定列</td><td class="fixedColumn"></td><td>1</td><td>2</td><td>3</td><td>4</td><td>5</td><td>6</td><td>7</td></tr>

            <tr><td>固定列</td><td class="fixedColumn"></td><td>1</td><td>2</td><td>3</td><td>4</td><td>5</td><td>6</td><td>7</td></tr>

            <tr><td>固定列</td><td class="fixedColumn"></td><td>1</td><td>2</td><td>3</td><td>4</td><td>5</td><td>6</td><td>7</td></tr>

            <tr><td>固定列</td><td class="fixedColumn"></td><td>1</td><td>2</td><td>3</td><td>4</td><td>5</td><td>6</td><td>7</td></tr>

        </table>

        </div>

    </body>

</html>

适用移动端

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

使用css固定table第一列的更多相关文章

  1. css table第一列 宽度

    table{table-layout:fixed;}table tr td:first-child,table tr td:first-child{width:120px;} 首行第一个td定宽同列的 ...

  2. 利用js、css、html固定table的列头不动

    1.CSS <style type="text/css"> #scroll_head { position: absolute; display: none; } &l ...

  3. 移动端固定头部和固定左边第一列的实现方案（Vue中实现demo）

    最近移动端做一份报表,需要左右滚动时,固定左边部分:上下滚动时,固定头部部分. 代码在Vue中简单实现 主要思路是: a.左边部分滚动,实时修改右边部分的滚动条高度 b.头部和内容部分都设置固定高度, ...

  4. css固定表格表头(各浏览器通用)

    <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/ ...

  5. (转)supertable像excel那样固定table的表头和第一列

    <!DOCTYPE HTML> <html> <head> <meta charset="utf-8"/> <title> ...

  6. html table 固定表头和列

    /**************************************************************** jQuery 插件. 功能: 固定表格标题行或列头 Version: ...

  7. CSS 控制table 滑动及调整列宽等问题总结

    一. 通过css控制table y方向上滚动 html中没有滚动条,可以根据overflow属性的scroll来对table显示不完全的内容进行滚动. 只是y方向上滚动,很简单,只要设置div的hei ...

  8. css实现div两列布局——左侧宽度固定，右侧宽度自适应（两种方法）

    原文:css实现div两列布局--左侧宽度固定,右侧宽度自适应(两种方法) 1.应用场景 左侧一个导航栏宽度固定,右侧内容根据用户浏览器窗口宽度进行自适应 2.思路 首先把这个问题分步解决,需要攻克以 ...

  9. 固定Table的头部和左边的列-在Knockout Js使用场景下

    要求:固定Table的头部和左边的列 场景:Knockout Js被用于绑定Table的数据源. 固定HTML表格的头部和列是一个很常见的需求.此文:http://www.cnblogs.com/so ...

随机推荐

  1. MySQL级联删除和级联修改

    1.新建主键table create table demo1_zhujian ( id int primary key auto_increment, name )); 2.新建外键table cre ...

  2. 【咖啡の设备】Wacaco的minipresso便携咖啡机（咖啡粉版，胶囊版）

    之前看到houjy527发帖说入手了一台minipresso胶囊版,想起来这货是个好玩具,出差旅行必备佳品(可惜我从没出过差) minipresso设计很赞,简直不能更方便了~ 下面是houjy527 ...

  3. 01_HBase概述

    1. HBase在Hadoop生态圈中的位置 问题:HBase 是什么,用在哪里,解决什么样的问题? 解答: 1)简单来说, HBase 是一种类似于面向列的分布式数据库(集群), 底层利用HDFS ...

  4. LA 3523 圆桌骑士（二分图染色+点双连通分量）

    https://vjudge.net/problem/UVALive-3523 题意: 有n个骑士经常举行圆桌会议,商讨大事.每次圆桌会议至少应有3个骑士参加,且相互憎恨的骑士不能坐在圆桌旁的相邻位置 ...

  5. [WCF安全3]使用wsHttpBinding构建基于SSL与UserName授权的WCF应用程序

    上一篇文章中介绍了如何使用wsHttpBinding构建UserName授权的WCF应用程序,本文将为您介绍如何使用wsHttpBinding构建基于SSL的UserName安全授权的WCF应用程序. ...

  6. HttpServletResponse response详解

    //内容类型和编码格式可以被调用多次,最后一次将覆盖之前的设置 //内容类型和编码格式必须在 //设置内容类型getWriter和getOutputStream方法之前调用,否则不起作用 //若未设置 ...

  7. JVM与垃圾回收机制(GC)和类的生命周期

    JVM运行时数据区 GC(垃圾回收机制) 什么是垃圾回收机制: 在系统运行过程中,会产生一些无用的对象,这些对象占据着一定的内存,如果不对这些对象清理回收无用的是对象,可能会导致内存的耗尽,所以垃圾回 ...

  8. .Net遍历窗体上控件

    实现遍历窗体上的控件以及找出TextBox控件,代码如下: foreach( Control control in this.Controls ) { if( control is TextBox ) ...

  9. CentOS7 LDAP 2.4 安装配置

    软件安装 # yum -y install openldap-servers openldap-clients # systemctl start slapd # systemctl enable s ...

  10. Xshell高级后门完整分析报告(ZT)

    1. 前言 近日,Xshell官方发布公告称其软件中存在后门.我们的实习生同学对该后门进行了详细的分析,确认这是一个具备恶意代码下载执行和数据回传等能力的高级木马. 后门代码存在于nssock2.dl ...