首先使用flex制作table

HTML（JavaScript）

 1 <!DOCTYPE html>
 2 <html lang="en">
 3 
 4 <head>
 5     <meta charset="UTF-8">
 6     <meta name="viewport" content="width=device-width, initial-scale=1.0">
 7     <meta http-equiv="X-UA-Compatible" content="ie=edge,chrome=1">
 8     <link rel="stylesheet" href="./sass/index.css">
 9     <script src="https://cdn.bootcss.com/jquery/1.11.0/jquery.min.js"></script>
10     <title>Document</title>
11 </head>
12 
13 <body>
14     <div class="container">
15         <!-- 标题 -->
16         <div class="book-title">
17             <h1 class="title">预约听课</h1>
18         </div>
19         <!-- 搜索 -->
20         <div class="search">
21             <input type="search" placeholder="可搜索昵称/姓名/手机号/ID">
22             <input type="button" value="搜索">
23         </div>
24 
25         <!-- 表单标题 -->
26         <div class="table">
27             <!-- 选中/取消 -->
28             <input type="checkbox" id="chooseAll" onchange="selectAll()">
29             <div class="table-name">标题</div>
30             <div class="table-name">内容</div>
31             <div class="table-name">时间</div>
32             <div class="table-name">详情</div>
33         </div>
34 
35         <!-- 表单内容 -->
36         <label>
37             <div class="table-content">
38                 <input type="checkbox">
39                 <div class="table-name">你要听课吗你要听课听课吗你要听课吗吗课吗你要听课吗吗你要听课吗你要听课吗</div>
40                 <div class="table-name">谈定，今天不上课</div>
41                 <div class="table-name">2015-04-5</div>
42                 <div class="table-name">详情</div>
43             </div>
44         </label>
45         <!-- 表单内容 -->
46         <label>
47             <div class="table-content">
48                 <input type="checkbox">
49                 <div class="table-name">我要听课，我要听课 我要听我要听课我要听课我要听课课我要听课，我要听课
50                 </div>
51                 <div class="table-name">谈定，今天上课</div>
52                 <div class="table-name">2015-4-6</div>
53                 <div class="table-name">详情</div>
54             </div>
55         </label>
56     </div>
57     <script>
58         // jq ： 多选
59         function selectAll() {
60             var isCheck = $("#chooseAll").is(':checked');
61             $("input[type='checkbox']").each(function() {
62                 this.checked = isCheck;
63             });
64         }
65         // js：自动放大/小input宽度
66         document.querySelector("input").addEventListener("input", function() {
67             // this.style.width="14%"
68             this.style.width = "187px";
69             this.style.width = this.scrollWidth + "px";
70         });
71     </script>
72 </body>

SASS

 1 // 嵌套最好不要超过三层
 2 body,
 3 html {
 4     margin: 0;
 5     padding: 0;
 6     padding: 8%;
 7     border: 1px solid #000;
 8 }
 9 
10 .container {
11     .title {
12         width: 100%;
13         border-bottom: 1px solid #000;
14     }
15     .search {
16         display: flex;
17         justify-content: flex-end;
18         input {
19             text-align: center;
20             padding: 5px;
21         }
22     }
23     .table {
24         position: relative;
25         border-bottom: 1px solid #000;
26         display: flex;
27         &-name {
28             width: 20%;
29             justify-content: flex-start;
30             word-break: break-all;
31             text-align: center;
32         }
33         &-content {
34             padding: 3% 0;
35             border-bottom: 1px solid #f00;
36             display: flex;
37             justify-content: flex-start;
38             align-items: center;
39             position: relative;
40             &:hover {
41                 background-color: #ddd;
42                 cursor: pointer;
43             }
44         }
45     }
46     input[type="checkbox"] {
47         position: absolute;
48         left: -25px;
49     }
50 }

posted @ 2018-04-11 19:59 Sunsin 阅读(729) 评论(0) 编辑收藏举报

努力加载评论中...

刷新页面返回顶部

Sunsin

面对它，无惧它，战胜它！

首先使用flex制作table

公告