html表格固定右侧列,表格固定列的简单实现.html

表格固定列的简单实现

*{

box-sizing: border-box;

}

.box{

width: 800px;

overflow-x:auto;

margin: 100px auto;

}

table{

width: 1000px;

border-collapse: collapse;

text-align: center;

white-space: nowrap;

}

td,th{

width: 100px;

height: 20px;

}

thead,tbody{

position: relative;

}

.fixation{

width: 101px;

height: 25px;

margin-top: -12px;

margin-left: -2px;

background-color: #fff;

border: 1px solid;

position: absolute;

}

表头1

表头2

表头3

表头4

表头5

表头6

表头7

表头8

表头9

表头10

数据1

数据2

数据3

数据4

数据5

数据6

数据7

数据8

数据9

数据10

数据1

数据2

数据3

数据4

数据5

数据6

数据7

数据8

数据9

数据10

数据1

数据2

数据3

数据4

数据5

数据6

数据7

数据8

数据9

数据10

数据1

数据2

数据3

数据4

数据5

数据6

数据7

数据8

数据9

数据10

数据1

数据2

数据3

数据4

数据5

数据6

数据7

数据8

数据9

数据10

数据1

数据2

数据3

数据4

数据5

数据6

数据7

数据8

数据9

数据10

数据1

数据2

数据3

数据4

数据5

数据6

数据7

数据8

数据9

数据10

数据1

数据2

数据3

数据4

数据5

数据6

数据7

数据8

数据9

数据10

数据1

数据2

数据3

数据4

数据5

数据6

数据7

数据8

数据9

数据10

数据1

数据2

数据3

数据4

数据5

数据6

数据7

数据8

数据9

数据10

一键复制

编辑

Web IDE

原始数据

按行查看

历史