HTML5 · 2020年1月14日 1

表格标签css固定列的方案

html中<table>表格标签css固定列方案,table固定最后一列,table固定第一列

CSS样式

<style>
    table {
        table-layout: auto !important;
        word-break: keep-all !important;
    }
    td,th{
        padding: 0 5px;
    }
    table tr:nth-child(even){
        background:white;
    }
    table tr th:nth-last-child(2), table tr td:nth-last-child(2){
        padding-right: 170px;
    }
    table th:last-child,  table tr td:last-child {
       background: inherit;
       border-left:1px solid #ddd;
       width:150px ;
       text-align: center;
       position: fixed;
       right: 0;
       z-index: 2;
    }

    table tr th:nth-child(2), table tr td:nth-child(2){
        padding-left: 170px;
    }
    table th:first-child,table tr td:first-child{
       background: red;
       border-left:1px solid #ddd;
       width:150px ;
       text-align: center;
       position: fixed;
       left: 0;
       z-index: 2;
    }
</style>

所有HTML代码:


<!DOCTYPE html>
<html>
<head>
    <meta http-equiv="Content-Type" content="text/html; charset=UTF-8"/>
    <link rel="stylesheet" href="/admin/css/common.css">
    <link rel="stylesheet" href="/admin//css/news/news.css">
    <link rel="stylesheet" href="/admin//css/font-awesome.min.css">
    <script src="/admin//js/jquery.min.js"></script>
    <script src="/admin//js/news.js"></script>
</head>
<style>
    table {
        table-layout: auto !important;
        word-break: keep-all !important;
    }
    td,th{
        padding: 0 5px;
    }
    table tr:nth-child(even){
        background:white;
    }
    table tr th:nth-last-child(2), table tr td:nth-last-child(2){
        padding-right: 170px;
    }
    table th:last-child,  table tr td:last-child {
       background: inherit;
       border-left:1px solid #ddd;
       width:150px ;
       text-align: center;
       position: fixed;
       right: 0;
       z-index: 2;
    }

    table tr th:nth-child(2), table tr td:nth-child(2){
        padding-left: 170px;
    }
    table th:first-child,table tr td:first-child{
       background: red;
       border-left:1px solid #ddd;
       width:150px ;
       text-align: center;
       position: fixed;
       left: 0;
       z-index: 2;
    }
</style>
<body>
<div class="list-content" style="overflow:auto;">
    <table>
        <tr>
            <th width="50px">序号</th>
            <th>应用名</th>
            <th>app_id</th>
            <th>secret_key</th>
            <th>绑定学校</th>
            <th>教务系统</th>
            <th>联系人</th>
            <th>联系电话</th>
            <th>状态</th>
            <th>创建日期</th>
            <th>更新日期</th>
            <th width="200">操作</th>
        </tr>
                <tr>
            <td align="center">1</td>
            <td>请打的</td>
            <td>1542081125346835</td>
            <td>29f7a4edd04af7f558870636b6689781</td>
            <td>青岛大学</td>
            <td>URP综合教务</td>
            <td>水电费</td>
            <td></td>
            <td>1</td>
            <td>2018-11-13 11:52:05</td>
            <td>2018-11-13 11:52:05</td>
            <td>
                <span class="edit-btn" οnclick="parent.showUrlDialog('edit/id/8')"><li class="fa fa-edit"></li> 编辑</span>
                <span class="delete-btn" οnclick="delAppClient('8')"><li class="fa fa-ban"></li> 删除</span>
            </td>
        </tr>
                <tr>
            <td align="center">2</td>
            <td>看手机</td>
            <td>1542036973909802</td>
            <td>7ce5dc0272e2482acf8c37ef9f0d1582</td>
            <td>青岛大学</td>
            <td>URP综合教务</td>
            <td>万洲</td>
            <td></td>
            <td>0</td>
            <td>2018-11-12 23:36:13</td>
            <td>2018-11-13 00:14:13</td>
            <td>
                <span class="edit-btn" οnclick="parent.showUrlDialog('app_client/edit/id/7')"><li class="fa fa-edit"></li> 编辑</span>
                <span class="delete-btn" οnclick="delAppClient('7')"><li class="fa fa-ban"></li> 删除</span>
            </td>
        </tr>
            </table>
</div>
<div class="page">
    </div>
 
</body>
</html>

参考:https://developer.mozilla.org/zh-CN/docs/Web/CSS/:nth-child 了解更多属性

参考:https://blog.csdn.net/veloi/article/details/84027505

Share this: