• 容器,表格 ,div,元素可左右拖动,滚动 css


    <!DOCTYPE html>
    <html lang="en">
    <head>
        <meta charset="utf-8">
        <title>Simple responsive table - demo 2</title>
        <meta name="viewport" content="width=device-width, initial-scale=1">
    <style type="text/css">
    
    
        table
        {
            margin: 0;
            border-collapse: collapse;
        }
        
        td, th
        {
            padding: .5em 1em;
            border: 1px solid #999;
        }
        
        .table-container
        {
            width: 100%;
            overflow-y: auto;
            _overflow: auto;
            margin: 0 0 1em;
        }
    
        .table-container::-webkit-scrollbar
        {
            -webkit-appearance: none;
            width: 14px;
            height: 14px;
        }
        
        .table-container::-webkit-scrollbar-thumb
        {
            border-radius: 8px;
            border: 3px solid #fff;
            background-color: rgba(0, 0, 0, .3);
        }
    </style>
    </head>
    <body>
    <div class="container">
        <div class="table-container">
            <table>
                <tr>
                    <th>Header 1</th>
                    <th>Header 2</th>
                    <th>Header 3</th>
                    <th>Header 4</th>
                    <th>Header 5</th>
                    <th>Header 6</th>
                    <th>Header 7</th>
                    <th>Header 8</th>
                </tr>
                <tr>
                    <td>row1_cell1</td>
                    <td>row1_cell2</td>
                    <td>row1_cell3</td>
                    <td>row1_cell4</td>
                    <td>row1_cell5</td>
                    <td>row1_cell6</td>
                    <td>row1_cell7</td>
                    <td>row1_cell8</td>
                </tr>
                <tr>
                    <td>row2_cell1</td>
                    <td>row2_cell2</td>
                    <td>row2_cell3</td>
                    <td>row2_cell4</td>
                    <td>row2_cell5</td>
                    <td>row2_cell6</td>
                    <td>row2_cell7</td>
                    <td>row2_cell8</td>
                </tr>
                <tr>
                    <td>row3_cell1</td>
                    <td>row3_cell2</td>
                    <td>row3_cell3</td>
                    <td>row3_cell4</td>
                    <td>row3_cell5</td>
                    <td>row3_cell6</td>
                    <td>row3_cell7</td>
                    <td>row3_cell8</td>
                </tr>
                <tr>
                    <td>row4_cell1</td>
                    <td>row4_cell2</td>
                    <td>row4_cell3</td>
                    <td>row4_cell4</td>
                    <td>row4_cell5</td>
                    <td>row4_cell6</td>
                    <td>row4_cell7</td>
                    <td>row4_cell8</td>
                </tr>
                <tr>
                    <td>row5_cell1</td>
                    <td>row5_cell2</td>
                    <td>row5_cell3</td>
                    <td>row5_cell4</td>
                    <td>row5_cell5</td>
                    <td>row5_cell6</td>
                    <td>row5_cell7</td>
                    <td>row5_cell8</td>
                </tr>
            </table>
        </div>
    </div>
    
    </body>
    </html>
  • 相关阅读:
    每日日报31
    每日日报30
    每日日报29
    《精益软件开发管理之道》阅读笔记03
    每日日报28
    ip地址访问vue项目
    eslint prettier vetur eslint
    线上环境去除console
    vue 多环境打包
    2申请高德地图key 初始化地图
  • 原文地址:https://www.cnblogs.com/fan-bk/p/8385575.html
Copyright © 2020-2023  润新知