zoukankan      html  css  js  c++  java
  • 表格第一列固定,右边内容可以左右滑动

    <!DOCTYPE html>
    <html lang="en">
    <head>
        <meta charset="UTF-8">
        <title>表格第一列固定,右边内容可以左右滑动</title>
        <style type="text/css">
     *
    {margin: 0; padding: 0}.table-wrapper{overflow-x:scroll;overflow-y:visible;width:230px;margin-left: 120px;border: 1px solid #f00;}td, th{padding: 5px 20px;width: 100px;}th:first-child{position: fixed;left: 5px}
        
    </style>
    </head>
    <body>
        <div class="table-wrapper">
        <table id="consumption-data" class="data">
            <thead class="header">
                <tr>
                    <th>Month</th>
                    <th>第一列</th>
                    <th>第二列</th>
                    <th>第三列</th>
                    <th>第四列</th>
                </tr>
            </thead>
            <tbody class="results">
                <tr>
                    <th>Jan</th>
                    <td>3163</td>
                    <td>3163</td>
                    <td>3163</td>
                    <td>3163</td>
                </tr>
                <tr>
                    <th>Feb</th>
                    <td>3163</td>
                    <td>3163</td>
                    <td>3163</td>
                    <td>3163</td>
                </tr>
                <tr>
                    <th>Mar</th>
                    <td>3163</td>
                    <td>3163</td>
                    <td>3163</td>
                    <td>3163</td>
                </tr>
                <tr>
                    <th>Apr</th>
                    <td>3163</td>
                    <td>3163</td>
                    <td>3163</td>
                    <td>3163</td> 
                </tr>
                <tr>   
                    <th>May</th>
                    <td>3163</td>
                    <td>3163</td>
                    <td>3163</td>
                    <td>3163</td>
                </tr>
                <tr>
                    <th>Jun</th>
                    <td>3163</td>
                    <td>3163</td>
                    <td>3163</td>
                    <td>3163</td>
                </tr>
           <tr>
                    <th>Jun</th>
                    <td>3163</td>
                    <td>3163</td>
                    <td>3163</td>
                    <td>3163</td>
                </tr>
            </tbody>
        </table>
    </div>
    </body>
    </html>
  • 相关阅读:
    Java三大框架
    单例模式和工厂模式(百度文库)
    使用java代码编辑oracle数据库
    extends 与implements的区别和用法
    介绍MVC编程架构模式
    接口具体是什么东西
    Servlet和JSP的本质和区别
    用户注册,登录,留言系统
    页面跳转的五种方法
    cookie的长度和限制数量
  • 原文地址:https://www.cnblogs.com/xiaoleidiv/p/5477024.html
Copyright © 2011-2022 走看看