正文 

当前位置： 首页 > java > java框架

使用css固定table第一列

Ironape      2022-02-08     389

关键词： 

.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>
View Code

 

适用移动端

 

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

 

css样式表中如何设置table的第一列的宽度是固定值。页面中有很多table纵向排列

...;。3、浏览器运行index.html页面，此时表格第一列的宽度被固定在65像素。参考技术A需要准备的材料分别有：电脑、浏览器、html编辑器。1、首先，打开html编辑器，新建html文件，例如：index.html。2、在index.html中的第1个<td>标签... 查看详情

table表格固定表头和第一列内容可滚动(代码片段)

 整理了下：<!DOCTYPEhtml><html><head><metahttp-equiv="Content-Type"content="text/html;charset=utf-8"/><title></title><metacharset="utf-8"/><styletype="text/css">*margin:0;padding:0;tablewidth:100%;text-align:center;border-collapse:collapse;bo... 查看详情

css让表格第一列和第一行固定

用css让表格左右移动滚动条的时候第一列固定，上下移动滚动条的时候第一行固定。并且浏览器兼容，麻烦提供全网页代码。参考技术A给你提供个思路：第一行为一行多列的表格；第一列为一列多行的表格；剩下就是一个表格... 查看详情

表格列固定

<!doctypehtml><htmldir="ltr"lang="zh-CN"><head><metacharset="utf-8"/><title>类似excel的滚动机制，当移动滚动条时固定table的第一行和第一列</title><styletype="text/css">#table-container{ 查看详情

antd-vue表格，固定左边第一列，设置滚动，有滚动条，第一列被隐藏(代码片段)

解决办法style里不要scoped，可以单独再加个style宽度为固定的宽度，我这里是200，和你在columns设置的宽度一样就行.ant-table-fixed-columns-in-bodydisplay:inline-block;width:200px; 查看详情

怎样用css设置table第一列样式

...大小或长度的影响，可以用于实现成比例的宽度。不允许使用负值。也可以用在上边框、边框的宽度或边框的属性略写。2.右边框宽度以下是引用片段：语法:border-right-width:<值>允许值:thin|medium|thick|<长度>初始值:medium适... 查看详情

表格在固定表头遇到样式问题

css样式来固定表头，首先设置两个table，这个时候就遇到了一个问题，那就是两个表格td的宽度要保持对其。这样才能做到固定表头的效果。首先给table设置一个固定宽度。然后添加样式table{table-layed:fixed}有可能还会遇到其他的问... 查看详情

如何将垂直滚动条添加到始终固定第一列的表中(代码片段)

...果记录太多，用户必须到页面末尾水平滚动。是否可以仅使用CSS进行垂直滚动？这是我的代码：<style>.rowdisplay:flex;flex-wrap:wrap;margin-right:-15px;margin-left:-15px;/*width*/::-webkit-scrollbarwidth:10px;height:7px;/*Track*/::-webkit-scrollbar-trackbackgrou... 查看详情

我想要一个扩展表（左->右），但第一列固定 [重复]

...并且它可以是一个很长的表格，从左到右。我尝试过：1.使用简单的HTML；2.使用DIV和C 查看详情

如何使用 Vuetify.js 的 v-simple-table 将标题放在第一列？

】如何使用Vuetify.js的v-simple-table将标题放在第一列？【英文标题】：HowtoputatitleinthefirstcolumnusingVuetify.js\'sv-simple-table?【发布时间】：2021-02-1110:56:58【问题描述】：我想使用v-simple-tble，一个Vuetify.js的UI组件，创建一个类似下表的... 查看详情

css显示：表格第一列太宽

】css显示：表格第一列太宽【英文标题】：cssdisplay:tablefirstcolumntoowide【发布时间】：2011-02-1219:04:34【问题描述】：我有一个这样的css表设置：<divclass=\'table\'><div><span>name</span><span>details</span></div><... 查看详情

css实现table固定宽度，超过单元格部分内容省略

...容的大小自适应的，没有内容的地方就挤到了一起。需要固定表格宽度和每一列的宽度。table-layout:fixed在固定表格布局中，水平布局仅取决于表格宽度、列宽度、表格边框宽度、单元格间距，而与单元格的内容无关。white-space:now... 查看详情

html如何在css里设置table的个个列的固定宽度

而在html里面就只是<tableclass="ss"><tr><td>aa</td><td>aa</td><td>aa</td></tr></table>不需要在每列重新设置了参考技术A<style>tdwidth:宽度值</style>即可追问我的是第一列跟第二列宽度... 查看详情

水平滚动的 HTML 表格（第一列固定）

】水平滚动的HTML表格（第一列固定）【英文标题】：HTMLtablewithhorizontalscrolling(firstcolumnfixed)【发布时间】：2011-03-2501:21:52【问题描述】：我一直在想办法制作一个第一列固定的表格（表格的其余部分有水平溢出）我看到了一个有... 查看详情

具有固定标题和固定第一列的动态 HTML 表

】具有固定标题和固定第一列的动态HTML表【英文标题】：DynamicHTMLTablewithFixedHeaderandFixedFirstcolumn【发布时间】：2014-02-2208:00:37【问题描述】：我正在动态创建一个html表格并填写其内容。之后，我将完整的HTML添加到我的aspx页面上... 查看详情

如何用css实现表格第一列固定其余内容横向滚动

最好是能给这列td或th单独定义css或js控制，这样比较好，有没有这种定义的呀可以参考此样例：.tablewidth:100%;overflow-x:scroll;background-color:#7c95b5;.fixedTablewidth:160%;text-align:center;color:#fff;font-size:14px;border-collapse:collapse;.fixedTabletrline-heigh... 查看详情

带有表格布局的表格：固定；以及如何使一列更宽

】带有表格布局的表格：固定；以及如何使一列更宽【英文标题】：Tablewithtable-layout:fixed;andhowtomakeonecolumnwider【发布时间】：2011-09-0909:13:39【问题描述】：所以我有一张这种风格的桌子：table-layout:fixed;这使得所有列的宽度相同... 查看详情

数据表排序：使一列保持固定

...umnstayfixed【发布时间】：2015-10-1113:20:12【问题描述】：我使用jQuery数据表插件。排序工作正常，但有一种方法，使一只停留总是一样的，不管排序是应用了哪些？P>例如，第一列都只是简单订单编号：1，2，3，4，5...当我按日... 查看详情