.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. ssm中不能访问静态资源问题

    最近用springmvc spring mybatis框架写程序,请求成功并获得数据,唯独css样式不能加载,但路径正确,css文件编码也是utf-8,用火狐debug总是显示未请求到(都快怀疑自己写 ...

  2. 【Network Architecture】SegNet论文解析（转）

    文章来源: https://blog.csdn.net/fate_fjh/article/details/53467948 Introduction 自己制作国内高速公路label,使用SegNet训 ...

  3. 如何将本地的项目上传到git

    如何将本地的项目上传到git 1 进入项目文件夹,把目录变为git仓库 git init 2 把文件添加到版本库中 git add . 3 把版本提交到版本库 git commit -m 'first ...

  4. LeetCode第[78]题(Java)：Subsets（求子集）扩展——第[90]题：Subsets 2

    题目:矩阵置0 难度:Easy 题目内容:   Given a set of distinct integers, nums, return all possible subsets (the pow ...

  5. 基于GTID搭建MHA

    一.简介 MHA 是一套优秀的作为MySQL高可用性环境下故障切换和主从提升的高可用软件.在MySQL故障切换过程中,MHA能做到在0~30秒之内自动完成数据库的故障切换操作,并且在进行故障切换的过程 ...

  6. [spring]Bean注入——在XML中配置

    Bean注入的方式有两种: 一.在XML中配置 属性注入 构造函数注入 工厂方法注入 二.使用注解的方式注入@Autowired,@Resource,@Required 本文首先讲解在XML中配置的注 ...

  7. mysql的基本的数据库的查询

    学习一个数据库我们要学习哪些东西: sql数据库的话, curd. 对于查询,要注意表的关联的查询. 索引,触发器,对于控制连接量,脚本, 数据库的可视化工具,权限管理. http://www.360 ...

  8. 基于dapper的通用泛型分页

    1.定义一个用来装载适合所有类的分页结果类 public class PageDataView<T> { private int _TotalNum; public PageDataVie ...

  9. UVA-10054 The Necklace （欧拉回路）

    题目大意:有n个珠子,珠子两边的颜色已知,问能否连成一条项链.(两个珠子可以项链当且仅当一个珠子的一边颜色与另一个珠子的另一边颜色相同). 题目分析:欧拉回路.将颜色视作节点,珠子当做边,问题变成了找 ...

  10. Vue打包上线部署

    一.路径问题 1.脚手架+webpack打包通过npm run build,但是后台tomcat部署上线的时候,会衍生出一些问题,比如,路径问题(因为在项目中,我们使用了绝对路径,这里必须要使用相对路 ...