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"><li class="fa fa-edit"></li> 编辑</span>
<span class="delete-btn"><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"><li class="fa fa-edit"></li> 编辑</span>
<span class="delete-btn"><li class="fa fa-ban"></li> 删除</span>
</td>
</tr>
</table>
</div>
<div class="page">
</div>
</body>
</html>
---------------------
【转载，仅作分享，侵删】
作者：meimeieee
原文：https://blog.csdn.net/veloi/article/details/84027505
版权声明：本文为博主原创文章，转载请附上博文链接！
|
|
收藏
淘帖
踩
奈斯，感谢分享
