表格根据屏幕自动缩放

最新推荐文章于 2020-12-24 19:27:09 发布

Kathy_LLi

最新推荐文章于 2020-12-24 19:27:09 发布

阅读量926

点赞数 1

CC 4.0 BY-SA版权

本文链接：https://blog.youkuaiyun.com/Kathy_Hui/article/details/84579269

<!DOCTYPE html>
<html lang="en">
<head>
   <meta charset="UTF-8">
   <title>表格</title>
   <style>
       .right-tab{
           width: 100%;
           color: #333;
           font-size: 14px;
           border-collapse:collapse;
           border-top: 1px solid #b9b9b9;
           border-right:1px solid #b9b9b9;
       }
       .right-tab tr{
           display: flex;
       }
       .right-tab th{
           width: 25%;
           font-weight: bold;
           height: 56px;
           display: flex;
           align-items: center;
           justify-content: center;
           border-bottom: 1px solid #b9b9b9;
           border-left: 1px solid #b9b9b9;
           font-size: 14px;
           color: #333;
           padding: 0 10px;
       }
       .right-tab td{
           width: 25%;
           min-height: 80px;
           display: flex;
           align-items: center;
           justify-content: center;
           flex-wrap: wrap;
           border-bottom: 1px solid #b9b9b9;
           border-left: 1px solid #b9b9b9;
           line-height: 20px;
           font-size: 14px;
           padding: 0 10px;
       }
       .right-tab td a {
           color: #333;
           text-decoration: none;
       }
   </style>
</head>
<body>
   <table class="right-tab">
       <tr class="tem_th">
   <th>序号</th>
<th>姓名</th>
<th>性别</th>
<th>电话号码</th>
<th>操作</th>
   </tr>
   <tr class="tem_td">
   <td>1</td>
   <td>Alice</td>
   <td>女</td>
   <td>13333333333</td>
   <td>
   <a href="javascript:;" class="tem_update" onclick="">编辑</a>
                | 
               <a href="javascript:;" class="tem_details" onclick="">详情</a>
                | 
               <a href="javascript:;" onclick=";" class="tem_delete">删除</a>
   </td>
   </tr>
   <tr class="tem_td">
   <td>2</td>
   <td>Grace</td>
   <td>女</td>
   <td>13333333333</td>
   <td>
   <a href="javascript:;" class="tem_update" onclick="">编辑</a>
                | 
               <a href="javascript:;" class="tem_details" onclick="">详情</a>
                | 
               <a href="javascript:;" onclick=";" class="tem_delete">删除</a>
   </td>
   </tr>
   </table>
</body>
</html>