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. monkey测试工具与常用的linux命令

    Monkey测试工具 说明:monkey是一个安卓自带的命令行工具,可以模拟用户向应用发起一定的伪随机事件.主要用于对app进行稳定性测试与压力测试. 实现:首先需要安装一个ADB工具,安装完之后,需 ...

  2. MyBatis多个接口参数报错：Available parameters are [0, 1, param1, param2]， 及解决方法

    1. sql语句如下: SELECT * FROM tb_crm_user WHERE id = #{userId, jdbcType=INTEGER} AND user_name = #{userN ...

  3. javascript基础 方法

    两者的区别:定时器隔一段时间执行一次,延迟器只执行一次 在html中直接调用此方法会返回null   

  4. DS博客作业06—图

    1.本周学习总结 1.1思维导图 1.2学习体会 2.PTA实验作业 2.1 图着色问题 图着色问题是一个著名的NP完全问题.给定无向图G=(V,E),问可否用K种颜色为V中的每一个顶点分配一种颜色, ...

  5. 第001弹：Java 中创建对象的4种方式

    Java 是面向对象的语言,不可避免的,“对象”这个概念是 Java 语言的核心部分,这里来简单讨论一下在 Java 中创建一般对象的方法. 总结下来有以下4种创建对象的方法: 使用 new 关键字调 ...

  6. 【Luogu】P4234最小差值生成树（LCT）

    题目链接 能把LCT打得每个函数都恰有一个错误也是挺令我惊讶的. 本题使用LCT维护生成树,具体做法是对原图中的每个边建一个点,然后连边的时候相当于是将边的起点跟“边”这个点连起来,边的终点也跟它连起 ...

  7. BZOJ2938 [Poi2000]病毒 【AC自动机】

    题目 二进制病毒审查委员会最近发现了如下的规律:某些确定的二进制串是病毒的代码.如果某段代码中不存在任何一段病毒代码,那么我们就称这段代码是安全的.现在委员会已经找出了所有的病毒代码段,试问,是否存在 ...

  8. windows命令总结

    工作中还是经常使用windows系统,将windows中常用的命令进行总结. 1. 从命令行打开资源管理器,即文件夹 start . 2. 查看端口占用情况 比如查看3000端口的占用情况 netst ...

  9. 刷题总结：排序机械臂（石室中学oj）（splay）

    题目: 题目描述 为了把工厂中高低不等的物品按从低到高排好序,工程师发明了一种排序机械臂.它遵循一个简单的排序规则,第一次操作找到最低的物品位置 P1,并把从左起第 1 个至第 P1 个之间的物品反序 ...

  10. 【CF20C】Dijkstra?（DIJKSTRA+HEAP）

    没什么可以说的 做dijk+heap模板吧 以后考试时候看情况选择SFPA和DIJKSTRA ; ..]of longint; dis:..]of int64; a:..]of int64; b:.. ...