.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. [小问题笔记（二）] 可能导致DropDownList的SelectedIndexChanged事件不触发的几种情况

    遇到SelectedIndexChanged事件没有触发,可以依次检查以下几种情况是否在程序中出现. 一.DropDownList的不同option设置了相同的value . 二.没有写 AutoPo ...

  2. spring boot2.1读取 apollo 配置中心1

    第一篇:搭建apollo配置中心 为什么选择apollo,我做了一些对比:   Diamond Disconf Apollo Spring Cloud Config 数据持久性 mysql mysql ...

  3. 读书笔记: Microsot .NET企业级应用架构设计

    Microsot .NET企业级应用架构设计 Dino Esposito   Andrea Saltarello 编    陈黎夫 译   人民邮电出版社 第一部分 设计原则 第1章 当代架构师和架构 ...

  4. winform中的ListBox和ComboBox绑定数据

    将集合数据绑定到ListBox和ComboBox控件,界面上显示某个属性的内容 //... //自定义了Person类(有Name,Age,Heigth等属性) List<Person> ...

  5. Huffuman Coding (哈夫曼编码)

    哈夫曼编码(Huffman Coding),又称霍夫曼编码,是一种编码方式,哈夫曼编码是可变字长编码(VLC)的一种.Huffman于1952年提出一种编码方法,该方法完全依据字符出现概率来构造异字头 ...

  6. 如何高效的使用 Git

    -- 代码昨天还是运行好好的今天就不行了. 代码被删了. 突然出现了一个奇怪的 bug,但是没人知道怎么回事. 如果你出现过上面的任何一种情况,那本篇文章就是为你准备的. 除了知道 git add, ...

  7. Python实现H5页面

    from selenium import webdriver mobile_emulation = {'deviceName':'iPhone X'} options = webdriver.Chro ...

  8. ItemsControl的应用

    ItemsControl是集合类控件的基类,如:ListBox.ComboBox.TreeView 所以,我们可以直接应用“ItemsControl”自定义我们“需要的”集合类型控件

  9. jQuery 中$.ajax()方法参数详解

    $.ajax({ url:'test.do', data:{id:,name:'xiaoming'}, type:'post', dataType:'json', success:function(d ...

  10. SpringAOP源码分析总结

    1.Advisor(增强器):充当Advice和Pointcut的适配器,类似使用Aspect的@Aspect注解的类(前一章节所述).一般有advice和pointcut属性. 祖先接口为org.s ...