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. Clickonce - Change deployment URL after publish

    mage.exe -Update C:\inetpub\wwwroot\aspnet40\AminoScience\Uploads\Application Files\AccUFeed_1_0_0_5 ...

  2. Policy-Based Reinforcement Learning

    Policy-based Approach policy-based 强化学习通常是要学习一个actor, actor可以用\(\pi_\theta (S)\) 来确定.如果我们用actor来玩游戏, ...

  3. 融合RocksDB, Pregel, Foxx & Satellite Collections 怎样使数据库性能提升35%？

    经过数月的研发测评,开源多模型数据库ArangoDB 终于发布了其 3.2 正式版,该版本消除了两个重大的障碍,添加了一个期待已久的功能,还集成了一个有趣的功能.此外,官方团队表示新版本将 Arang ...

  4. [git 学习篇] git commit原理 --实践体会

    1 现对readme.txt作出修改,增加一行内容: Git has a mutable index called stage. Git is a distributed version contro ...

  5. IB_DESIGNABLE 和 IBInspectable 的用法

    我们经常会在用一些自定义 UIView 来完成一些特殊的UI效果,但是怎么让我自定义的 UIView 在 Storyboard 中预览和修改一些自定义参数呢.这就需要用到两个吊吊的东西. IB_DES ...

  6. 【bzoj1585】[Usaco2009 Mar]Earthquake Damage 2 地震伤害 网络流最小割

    题目描述 Farmer John的农场里有P个牧场,有C条无向道路连接着他们,第i条道路连接着两个牧场Ai和Bi,注意可能有很多条道路连接着相同的Ai和Bi,并且Ai有可能和Bi相等.Farmer J ...

  7. hihoCoder #1072 辅导

    题意 $\DeclareMathOperator{\lcm}{lcm}$选 $k$ ($k\le 10$) 个 $1$ 到 $n$($n\le 10^9$)之间的整数(可以相同),使得 $\lcm(a ...

  8. linux监控平台搭建-内存

    linux监控平台搭建-内存 上一篇文章说的硬盘.就写一下.更加重要的东西.在手机上面是RAM.机器是memory.内存是按照字节编址.每个地址的存储单元可以存放8bit的数据.cpu 通过内存地址获 ...

  9. 消防（bzoj 2282）

    Description 某个国家有n个城市,这n个城市中任意两个都连通且有唯一一条路径,每条连通两个城市的道路的长度为zi(zi<=1000). 这个国家的人对火焰有超越宇宙的热情,所以这个国家 ...

  10. POJ 3233

    矩阵分治 注意不要用 (*this) 会改变原值 #include <iostream> #include <cstdio> #include <cstring> ...