表格标签css固定最后一列方案

版权声明:本文为博主原创文章,未经博主允许不得转载。 https://blog.csdn.net/meimeieee/article/details/84027505

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

先看效果吧:

css写法:

<style>

    /*设置倒数第二个 右边内边距*/
    table tr th:nth-last-child(2), table tr td:nth-last-child(2){
        padding-right: 170px;
    }

    /*设置倒数第一个 固定*/
    table tr 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;
    }
</style>

具体代码:


<!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;
    }
</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" onclick="parent.showUrlDialog('edit/id/8')"><li class="fa fa-edit"></li> 编辑</span>
                <span class="delete-btn" onclick="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" onclick="parent.showUrlDialog('app_client/edit/id/7')"><li class="fa fa-edit"></li> 编辑</span>
                <span class="delete-btn" onclick="delAppClient('7')"><li class="fa fa-ban"></li> 删除</span>
            </td>
        </tr>
            </table>
</div>
<div class="page">
    </div>

</body>
</html>

 

阅读更多

扫码向博主提问

狂野小青年

博客专家

非学,无以致疑;非问,无以广识
  • 擅长领域:
  • PHP
  • Android
  • Linux
  • web前端
  • 产品
去开通我的Chat快问

没有更多推荐了,返回首页