chenzhiguang
/
scene_wisdom


			
				
					
						
						
							123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169170171172173174175176177178179180181182183184185186187188189
							<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <style>
        html, body{
            /*overflow: hidden;*/
        }
        .lalala{
            width: 100%;
            height: 300px;
            overflow-x: scroll;
        }
        table{
            width: 2000px;
            border-collapse: collapse;
        }
        th, td {
            border-bottom: 1px solid #ccc;
            border-right: 1px solid #ccc;
            width: auto;
        }
        table thead {
            /*display: block;*/
            /*width: 100%;*/
            height: 40px;
            /*overflow-y: scroll;*/
            position: sticky;
            position: -webkit-sticky;
            top: 0;
            left: 0;
            /*z-index: 2;*/
            background: cadetblue;
        }

        table tbody {
            /*display: block;*/
            /*height: 400px;*/
        }

        table thead,
        tbody tr{
            /*width: 2000px;*/
            /*display: table;*/
            height: 40px;
            table-layout: fixed;
            font-size: 16px;
            text-align:center;
        }

        tr td:first-child, tr:first-child th:first-child{
            background: red;
            position: sticky;
            position: -webkit-sticky;
            top: 0;
            left: 0;
            z-index: 2;
        }
        tr td:last-child, tr:first-child th:last-child{
            background: red;
            position: sticky;
            position: -webkit-sticky;
            top: 0;
            right: 0;
            z-index: 2;
        }
        /*.tfoot{*/
        /*    position: sticky;*/
        /*    position: -webkit-sticky;*/
        /*    bottom: 0;*/
        /*    background: #0f88eb;*/
        /*}*/
        .tfoot td{
            position: sticky;
            position: -webkit-sticky;
            top: auto !important;
            bottom: 0;
            background: #0f88eb;
        }
    </style>
</head>
<body>
<div class="lalala">
    <table style="table-layout: fixed">
        <thead>
        <tr>
            <th width="100">1</th>
            <th width="300">2</th>
            <th width="300">3</th>
            <th width="300">4</th>
            <th width="300">5</th>
            <th width="100">6</th>
        </tr>
        </thead>
        <tbody>
        <tr>
            <td>1-1111</td>
            <td>2</td>
            <td>3</td>
            <td>4</td>
            <td>5</td>
            <td>6</td>
        </tr>
        <tr>
            <td>1</td>
            <td>2</td>
            <td>3</td>
            <td>4</td>
            <td>5</td>
            <td>6</td>
        </tr>
        <tr>
            <td>1</td>
            <td>2</td>
            <td>3</td>
            <td>4</td>
            <td>5</td>
            <td>6</td>
        </tr>
        <tr>
            <td>1</td>
            <td>2</td>
            <td>3</td>
            <td>4</td>
            <td>5</td>
            <td>6</td>
        </tr>
        <tr>
            <td>1</td>
            <td>2</td>
            <td>3</td>
            <td>4</td>
            <td>5</td>
            <td>6</td>
        </tr>
        <tr>
            <td>1</td>
            <td>2</td>
            <td>3</td>
            <td>4</td>
            <td>5</td>
            <td>6</td>
        </tr>
        <tr>
            <td>1</td>
            <td>2</td>
            <td>3</td>
            <td>4</td>
            <td>5</td>
            <td>6</td>
        </tr>
        <tr>
            <td>1</td>
            <td>2</td>
            <td>3</td>
            <td>4</td>
            <td>5</td>
            <td>6</td>
        </tr>
        <tr>
            <td>1</td>
            <td>2</td>
            <td>3</td>
            <td>4</td>
            <td>5</td>
            <td>6</td>
        </tr>
        <tr>
            <td>1</td>
            <td>2</td>
            <td>3</td>
            <td>4</td>
            <td>5</td>
            <td>6</td>
        </tr>
        <tr class="tfoot">
            <td>1</td>
            <td>2</td>
            <td>3</td>
            <td>4</td>
            <td>5</td>
            <td>6</td>
        </tr>
        </tbody>
    </table>
</div>
</body>
</html>