flex 固定一列_表格(Table)固定第一列，其余列可水平滚动【实例源码】

最新推荐文章于 2022-11-26 09:44:09 发布

咕噜咕噜吨

最新推荐文章于 2022-11-26 09:44:09 发布

阅读量662

点赞数

CC 4.0 BY-SA版权

文章标签： flex 固定一列

本文链接：https://blog.youkuaiyun.com/weixin_36410141/article/details/111944575

本文提供了一个实例，展示了如何使用Flex布局来实现表格的第一列固定，而其余列可以水平滚动的效果。通过CSS样式设置，创建了一个具有固定第一列的表格，实现了在数据展示时保持关键列可视的需求。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

有时候表格数据展示需要左右水平滚动表格列，但是第一列可能是主体列需要固定起来，因此就有了本文介绍的实例——表格(Table)固定第一列，其余列可水平滚动。

表格(Table)固定第一列，其余列可水平滚动

html代码html>

表格固定第一列

* {

margin: 0px;

padding: 0px;

box-sizing: border-box;

}

body,

html {

height: 100%;

font-family: sans-serif;

}

.limiter {

width: 100%;

margin: 0 auto;

background: #fa71cd;

background: -webkit-linear-gradient(bottom, #c471f5, #fa71cd);

background: -o-linear-gradient(bottom, #c471f5, #fa71cd);

background: -moz-linear-gradient(bottom, #c471f5, #fa71cd);

background: linear-gradient(bottom, #c471f5, #fa71cd);

}

.container-table100 {

max-width: 1366px;

margin: 0 auto;

min-height: 100vh;

display: -webkit-box;

display: -webkit-flex;

display: -moz-box;

display: -ms-flexbox;

display: flex;

flex-wrap: wrap;

align-items: center;

justify-content: center;

padding: 33px 100px;

}

.wrap-table100 {

width: 100%;

}

/*//////////////////////////////////////////////////////////////////

[ Table ]*/

.table100 {

background-color: #fff;

}

table {

width: 100%;

}

th {

font-weight: bold;

text-align: left;

padding-right: 10px;

}

td {

font-weight: unset;

padding-right: 10px;

}

.column1 {

width: 100%;

padding-left: 40px;

}

.column2 {

width: 225px;

padding-left: 55px;

}

.column3 {

width: 205px;

}

.column4 {

width: 195px;

}

.column5 {

width: 235px;

}

.column6 {

width: 170px;

}

.column7 {

width: 330px;

}

.column8 {

width: 305px;

}

.table100 th {

padding-top: 21px;

padding-bottom: 21px;

}

.table100 td {

padding-top: 16px;

padding-bottom: 16px;

}

/*==================================================================

[ Fix col ]*/

.table100 {

width: 100%;

position: relative;

}

.table100-firstcol {

background-color: #fff;

position: absolute;

z-index: 1000;

width: 310px;

top: 0;

left: 0;

}

.table100-firstcol table {

background-color: #fff;

}

.wrap-table100-nextcols {

width: 100%;

overflow: auto;

padding-left: 310px;

padding-bottom: 28px;

}

.table100-nextcols table {

table-layout: fixed;

}

.shadow-table100-firstcol {

box-shadow: 8px 0px 10px 0px rgba(0, 0, 0, 0.05);

-moz-box-shadow: 8px 0px 10px 0px rgba(0, 0, 0, 0.05);

-webkit-box-shadow: 8px 0px 10px 0px rgba(0, 0, 0, 0.05);

-o-box-shadow: 8px 0px 10px 0px rgba(0, 0, 0, 0.05);

-ms-box-shadow: 8px 0px 10px 0px rgba(0, 0, 0, 0.05);

}

.table100-firstcol table {

background-color: transparent;

}

/*==================================================================

[ Ver1 ]*/

.table100.ver1 th {

font-family: Roboto-Bold;

font-size: 14px;

color: #333333;

line-height: 1.4;

text-transform: uppercase;

}

.table100.ver1 td {

font-family: Roboto-Medium;

font-size: 15px;

line-height: 1.4;

}

.table100.ver1 .table100-firstcol td {

color: #666666;

}

.table100.ver1 .table100-nextcols td {

color: #999999;

}

.table100.ver1 tr {

border-bottom: 1px solid #f2f2f2;

}

Employees

Brandon GreenKathy DanielsElizabeth AlvaradoMichael ColemanJason CoxChristian PerkinsEmily Wheeler

PositionStart dateLast ActivityContactsAgeAddressCard No

CMO16 Nov 201216 Nov 2017[email protected]30New York City, NY424242xxxxxx6262Marketing16 Nov 201530 Nov 2017[email protected]26New York City, NY424242xxxxxx1616CFO16 Nov 201330 Nov 2017[email protected]32New York City, NY424242xxxxxx5326Designer16 Nov 201330 Nov 2017[email protected]22New York City, NY424242xxxxxx6328Developer16 Nov 201730 Nov 2017[email protected]25New York City, NY424242xxxxxx7648Sale16 Nov 201630 Nov 2017[email protected]28New York City, NY424242xxxxxx4152Support16 Nov 201330 Nov 2017[email protected]24New York City, NY424242xxxxxx6668