使用css固定table第一列

.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>1td><td>2td><td>3td><td>4td><td>5td><td>6td><td>7td>tr>
            <tr><td>固定列td><td class="fixedColumn">td><td>1td><td>2td><td>3td><td>4td><td>5td><td>6td><td>7td>tr>
            <tr><td>固定列td><td class="fixedColumn">td><td>1td><td>2td><td>3td><td>4td><td>5td><td>6td><td>7td>tr>
            <tr><td>固定列td><td class="fixedColumn">td><td>1td><td>2td><td>3td><td>4td><td>5td><td>6td><td>7td>tr>
            <tr><td>固定列td><td class="fixedColumn">td><td>1td><td>2td><td>3td><td>4td><td>5td><td>6td><td>7td>tr>
            <tr><td>固定列td><td class="fixedColumn">td><td>1td><td>2td><td>3td><td>4td><td>5td><td>6td><td>7td>tr>
            <tr><td>固定列td><td class="fixedColumn">td><td>1td><td>2td><td>3td><td>4td><td>5td><td>6td><td>7td>tr>
            <tr><td>固定列td><td class="fixedColumn">td><td>1td><td>2td><td>3td><td>4td><td>5td><td>6td><td>7td>tr>
            <tr><td>固定列td><td class="fixedColumn">td><td>1td><td>2td><td>3td><td>4td><td>5td><td>6td><td>7td>tr>
            <tr><td>固定列td><td class="fixedColumn">td><td>1td><td>2td><td>3td><td>4td><td>5td><td>6td><td>7td>tr>
            <tr><td>固定列td><td class="fixedColumn">td><td>1td><td>2td><td>3td><td>4td><td>5td><td>6td><td>7td>tr>
            <tr><td>固定列td><td class="fixedColumn">td><td>1td><td>2td><td>3td><td>4td><td>5td><td>6td><td>7td>tr>
            <tr><td>固定列td><td class="fixedColumn">td><td>1td><td>2td><td>3td><td>4td><td>5td><td>6td><td>7td>tr>
            <tr><td>固定列td><td class="fixedColumn">td><td>1td><td>2td><td>3td><td>4td><td>5td><td>6td><td>7td>tr>
            <tr><td>固定列td><td class="fixedColumn">td><td>1td><td>2td><td>3td><td>4td><td>5td><td>6td><td>7td>tr>
            <tr><td>固定列td><td class="fixedColumn">td><td>1td><td>2td><td>3td><td>4td><td>5td><td>6td><td>7td>tr>
            <tr><td>固定列td><td class="fixedColumn">td><td>1td><td>2td><td>3td><td>4td><td>5td><td>6td><td>7td>tr>
            <tr><td>固定列td><td class="fixedColumn">td><td>1td><td>2td><td>3td><td>4td><td>5td><td>6td><td>7td>tr>
            <tr><td>固定列td><td class="fixedColumn">td><td>1td><td>2td><td>3td><td>4td><td>5td><td>6td><td>7td>tr>
            <tr><td>固定列td><td class="fixedColumn">td><td>1td><td>2td><td>3td><td>4td><td>5td><td>6td><td>7td>tr>
            <tr><td>固定列td><td class="fixedColumn">td><td>1td><td>2td><td>3td><td>4td><td>5td><td>6td><td>7td>tr>
            <tr><td>固定列td><td class="fixedColumn">td><td>1td><td>2td><td>3td><td>4td><td>5td><td>6td><td>7td>tr>
            <tr><td>固定列td><td class="fixedColumn">td><td>1td><td>2td><td>3td><td>4td><td>5td><td>6td><td>7td>tr>
            <tr><td>固定列td><td class="fixedColumn">td><td>1td><td>2td><td>3td><td>4td><td>5td><td>6td><td>7td>tr>
            <tr><td>固定列td><td class="fixedColumn">td><td>1td><td>2td><td>3td><td>4td><td>5td><td>6td><td>7td>tr>
            <tr><td>固定列td><td class="fixedColumn">td><td>1td><td>2td><td>3td><td>4td><td>5td><td>6td><td>7td>tr>
            <tr><td>固定列td><td class="fixedColumn">td><td>1td><td>2td><td>3td><td>4td><td>5td><td>6td><td>7td>tr>
            <tr><td>固定列td><td class="fixedColumn">td><td>1td><td>2td><td>3td><td>4td><td>5td><td>6td><td>7td>tr>
            <tr><td>固定列td><td class="fixedColumn">td><td>1td><td>2td><td>3td><td>4td><td>5td><td>6td><td>7td>tr>
            <tr><td>固定列td><td class="fixedColumn">td><td>1td><td>2td><td>3td><td>4td><td>5td><td>6td><td>7td>tr>
            <tr><td>固定列td><td class="fixedColumn">td><td>1td><td>2td><td>3td><td>4td><td>5td><td>6td><td>7td>tr>
            <tr><td>固定列td><td class="fixedColumn">td><td>1td><td>2td><td>3td><td>4td><td>5td><td>6td><td>7td>tr>
            <tr><td>固定列td><td class="fixedColumn">td><td>1td><td>2td><td>3td><td>4td><td>5td><td>6td><td>7td>tr>
            <tr><td>固定列td><td class="fixedColumn">td><td>1td><td>2td><td>3td><td>4td><td>5td><td>6td><td>7td>tr>
        table>
        div>
    body>
html>
View Code

 

适用移动端

 

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

 

你可能感兴趣的:(使用css固定table第一列)