表格demo

最新推荐文章于 2023-10-31 10:05:29 发布
hsany330
最新推荐文章于 2023-10-31 10:05:29 发布
阅读量154
点赞数
本文链接：https://blog.csdn.net/hsany330/article/details/119319154
版权
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>table</title>
    <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css">
    <script src="https://code.jquery.com/jquery-3.5.1.js" type="text/javascript"></script>
    <script src="./colResizable-1.6.min.js" type="text/javascript"></script>
    
    <style type="text/css">
        /* Sticky footer styles
        -------------------------------------------------- */
        html {
        position: relative;
        min-height: 100%;
        }
        body {
        /* Margin bottom by footer height */
        margin-bottom: 60px;
        }
        .footer {
        position: absolute;
        bottom: 0;
        width: 100%;
        /* Set the fixed height of the footer here */
        height: 60px;
        background-color: #f5f5f5;
        }


        /* Custom page CSS
        -------------------------------------------------- */
        /* Not required for template or sticky footer method. */

        body > .container {
            padding: 60px 15px 0;
        }
        .container .text-muted {
            margin: 20px 0;
        }

        .footer > .container {
            padding-right: 15px;
            padding-left: 15px;
        }

        code {
            font-size: 80%;
        }

        table {
            border-collapse: collapse;
        }
        th,td {
            /* min-width: 110px; */
            text-align: right;
        }
        /* 表格第一行样式 */
        th {
            position: sticky;
            background-color: #fff;
            height: 35px;
            line-height: 35px;
            color: #808080;
            font-size: 12px;
            /* padding-right: 5px; */
            border-bottom: 1px solid #F0F2F5;
            font-weight: normal;
        }
        td {
            background-color: #fff;
            padding: 7px 10px 7px 0px;
            font-size: 15px;
        }
        /* 表格第一列样式 */
        td:first-child {
            background-color: #fff;
            position: sticky;
            left: 0px;
            text-align: left;
            padding-left: 10px;
            min-width: 160px;
        }
        /* 表格第一行和第一列重合的左上角单元格样式 */
        th:first-child {
            position: sticky;
            left: 0px;
            z-index: 1;
            height: 35px;
            line-height: 35px;
            padding-left: 10px;
            min-width: 160px;
            /* font-weight: normal; */
            /* border-bottom: 1px solid #F0F2F5; */
        }        
    </style>
    <script type="text/javascript">
        $(function() {
            $("table").colResizable();
        })
    </script>    
</head>
<body>
    <h3>
        基础表格宽度调整
    </h3>
    <table class="table table-bordered">
        <thead>
            <tr>
               <th>栏目类型</th>
               <th>活动名称</th>
               <th>状态</th>
               <th>操作选项</th>
            </tr>
        </thead>
        <tbody>
            <tr>
               <td>青春日记</td>
               <td>我们一起傻逼的日子</td>
               <td>提交</td>
               <td>审核</td>
            </tr>
            <tr>
               <td>我和孩子的成长故事</td>
               <td>成长故事</td>
               <td>通过</td>
               <td>审核</td>
            </tr>
            <tr>
                <td>青春日记</td>
                <td>我们一起傻逼的日子</td>
                <td>提交</td>
                <td>审核</td>
             </tr>
             <tr>
                <td>我和孩子的成长故事</td>
                <td>成长故事</td>
                <td>通过</td>
                <td>审核</td>
             </tr>
             <tr>
                <td>青春日记</td>
                <td>我们一起傻逼的日子</td>
                <td>提交</td>
                <td>审核</td>
             </tr>
             <tr>
                <td>我和孩子的成长故事</td>
                <td>成长故事</td>
                <td>通过</td>
                <td>审核</td>
             </tr>
             <tr>
                <td>青春日记</td>
                <td>我们一起傻逼的日子</td>
                <td>提交</td>
                <td>审核</td>
             </tr>
             <tr>
                <td>我和孩子的成长故事</td>
                <td>成长故事</td>
                <td>通过</td>
                <td>审核</td>
             </tr>
             <tr>
                <td>青春日记</td>
                <td>我们一起傻逼的日子</td>
                <td>提交</td>
                <td>审核</td>
             </tr>
             <tr>
                <td>我和孩子的成长故事</td>
                <td>成长故事</td>
                <td>通过</td>
                <td>审核</td>
             </tr>
             <tr>
                <td>青春日记</td>
                <td>我们一起傻逼的日子</td>
                <td>提交</td>
                <td>审核</td>
             </tr>
             <tr>
                <td>我和孩子的成长故事</td>
                <td>成长故事</td>
                <td>通过</td>
                <td>审核</td>
             </tr>
             <tr>
                <td>青春日记</td>
                <td>我们一起傻逼的日子</td>
                <td>提交</td>
                <td>审核</td>
             </tr>
             <tr>
                <td>我和孩子的成长故事</td>
                <td>成长故事</td>
                <td>通过</td>
                <td>审核</td>
             </tr>
        </tbody>
    </table>
</body>
</html>