HTML（JavaScript）

 <!DOCTYPE html>

 <html lang="en">

 <head>

     <meta charset="UTF-8">

     <meta name="viewport" content="width=device-width, initial-scale=1.0">

     <meta http-equiv="X-UA-Compatible" content="ie=edge,chrome=1">

     <link rel="stylesheet" href="./sass/index.css">

     <script src="https://cdn.bootcss.com/jquery/1.11.0/jquery.min.js"></script>

     <title>Document</title>

 </head>

 <body>

     <div class="container">

         <!-- 标题 -->

         <div class="book-title">

             <h1 class="title">预约听课</h1>

         </div>

         <!-- 搜索 -->

         <div class="search">

             <input type="search" placeholder="可搜索昵称/姓名/手机号/ID">

             <input type="button" value="搜索">

         </div>

         <!-- 表单标题 -->

         <div class="table">

             <!-- 选中/取消 -->

             <input type="checkbox" id="chooseAll" onchange="selectAll()">

             <div class="table-name">标题</div>

             <div class="table-name">内容</div>

             <div class="table-name">时间</div>

             <div class="table-name">详情</div>

         </div>

         <!-- 表单内容 -->

         <label>

             <div class="table-content">

                 <input type="checkbox">

                 <div class="table-name">你要听课吗你要听课听课吗你要听课吗吗课吗你要听课吗吗你要听课吗你要听课吗</div>

                 <div class="table-name">谈定，今天不上课</div>

                 <div class="table-name">2015-04-5</div>

                 <div class="table-name">详情</div>

             </div>

         </label>

         <!-- 表单内容 -->

         <label>

             <div class="table-content">

                 <input type="checkbox">

                 <div class="table-name">我要听课，我要听课 我要听我要听课我要听课我要听课课我要听课，我要听课

                 </div>

                 <div class="table-name">谈定，今天上课</div>

                 <div class="table-name">2015-4-6</div>

                 <div class="table-name">详情</div>

             </div>

         </label>

     </div>

     <script>

         // jq ： 多选

         function selectAll() {

             var isCheck = $("#chooseAll").is(':checked');

             $("input[type='checkbox']").each(function() {

                 this.checked = isCheck;

             });

         }

         // js：自动放大/小input宽度

         document.querySelector("input").addEventListener("input", function() {

             // this.style.width="14%"

             this.style.width = "187px";

             this.style.width = this.scrollWidth + "px";

         });

     </script>

 </body>

SASS

 // 嵌套最好不要超过三层

 body,

 html {

     margin:;

     padding:;

     padding: 8%;

     border: 1px solid #000;

 }

 .container {

     .title {

         width: 100%;

         border-bottom: 1px solid #000;

     }

     .search {

         display: flex;

         justify-content: flex-end;

         input {

             text-align: center;

             padding: 5px;

         }

     }

     .table {

         position: relative;

         border-bottom: 1px solid #000;

         display: flex;

         &-name {

             width: 20%;

             justify-content: flex-start;

             word-break: break-all;

             text-align: center;

         }

         &-content {

             padding: 3% 0;

             border-bottom: 1px solid #f00;

             display: flex;

             justify-content: flex-start;

             align-items: center;

             position: relative;

             &:hover {

                 background-color: #ddd;

                 cursor: pointer;

             }

         }

     }

     input[type="checkbox"] {

         position: absolute;

         left: -25px;

     }

 }

首先使用flex制作table的更多相关文章

  1. Css制作table细线表格

    制作细线表格,我想应该是最基本的css知识了,记录下来巩固下. 推荐: table{ border-collapse:collapse; border: 1px solid #000000; } td ...

  2. VUE2.0 饿了吗视频学习笔记（七-终）：compute,循环,flex,display:table

    一.star组件使用到了computed属性 computed相当于属性的一个实时计算,当对象的某个值改变的时候,会进行实时计算. computed: { starType() { return 's ...

  3. HTML布局四剑客-Flex,Grid,Table,Float

    前言 在HTML布局中有很多的选择,同一种表现方式可以使用不同的方法来实现.下面来对四种最常见的布局方式进行阐述和解释,它们分别是Float,Table,Grid和Flex Float 第一位出场的就 ...

  4. 关于html 制作table的一个注意点

    数据分析,一般都需要显示数据,就需要使用html做复杂的表格.复杂表格一般是对td的rowspan .colspan属性值. 在html中<td> 标签定义 HTML 表格中的标准单元格. ...

  5. jQuery制作table表格布局插件带有列左右拖动效果

    压缩包:http://www.xwcms.net/js/bddm/99004.html

  6. 微信小程序简易table组件实现

    前提:微信小程序自1.6.3基础库版本库开始支持简洁组件,之前的版本因不支持,故在引用组件处默认为空节点.关于微信小程序已有模板为何还需构建组件?一是因为组件可以更方便的自定义并绑定行为,二是在其他页 ...

  7. 杂项：flex （adobe flex）

    ylbtech-杂项:Flex (Adobe Flex) Flex指Adobe Flex,基于其专有的Macromedia Flash平台,它是涵盖了支持RIA(Rich Internet Appli ...

  8. 通过J2EE Web工程添加Flex项目，进行BlazeDS开发

    http://www.cnblogs.com/noam/archive/2010/07/22/1782955.html 环境:Eclipse 7.5 + Flex Builder 4 plugin f ...

  9. 小白入门篇:flex布局

    --前言 因为这个星期写一个小的项目用到flex布局和grid布局,虽然这两种布局都是兼容性都有问题,但是别急,我觉的以后肯定是会发展并且流行起来的,毕竟google大法好,而且这两个布局真的比一般的 ...

随机推荐

  1. web安全测试---AppScan扫描工具(转)

    安全测试应该是测试中非常重要的一部分,但他常常最容易被忽视掉. 尽管国内经常出现各种安全事件,但没有真正的引起人们的注意.不管是开发还是测试都不太关注产品的安全.当然,这也不能怪我们苦B的“民工兄弟” ...

  2. day01_07.逻辑与字符串运算符

    &&(并且)====>发现&符号总是打错,记忆口令:&7(暗器),在数字7上面,在python中是and ||(或者)====>在python中是or . ...

  3. PHP 修改配置文件后重启命名

    centosPHP配置文件路径: /etc/php.ini 修改完配置文件后需要重启php服务: systemctl restart php-fpm

  4. Android中如何截取字符串中某个字符之前或之后的字符串

    代码改变世界 Android中如何截取字符串中某个字符之前或之后的字符串 //截取#之前的字符串 String str = "sdfs#d"; str.substring(0, s ...

  5. hdu5852 Intersection is not allowed! 【矩阵行列式】

    题意 给出\(n*n\)网格\((n<=10^5)\) 顶部有\(K\)个起点,底部有\(K\)个相对应的终点 每次只能向下或向右走 求有多少种从各个起点出发到达对应终点且路径不相交的路径? 对 ...

  6. 北京集训TEST13——PA（第k小数）

    题目: Description [问题描述] 从n个数中选若干(至少1)个数求和,求所有方案中第k小的和(和相同但取法不同的视为不同方案).[输入格式]    第一行输入2个正整数n,k.    第二 ...

  7. element-ui select组件使用需要注意的

    当在使用select组件的时候,要注意 <el-select v-model="scope.row.state" @change="editDriftStatus& ...

  8. mybatis如何传入一个list参数

    <!-- 7.2 foreach(循环List<String>参数) - 作为where中in的条件 -->  <select id="getStudentLi ...

  9. 【CF1027B】Numbers on the Chessboard（数学）

    题意:给定一个n*n的矩阵与生成矩阵的方式,多次询问同一个方格内(x,y)的数字是多少 题意:浪费人生的矩阵题,找规律 #include<cstdio> #include<cstri ...

  10. 【CF725D】Contest Balloons（贪心，堆）

    题意:acm队伍可以得气球,相同气球数是一个排名.每个队伍有一个气球数上限,如果该队伍的气球数大于上限 该队伍被淘汰.给了你队伍的气球数,你的气球可以给别人,问你最大可能的排名. (2 ≤ n ≤ 3 ...