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. 《机器学习实战》笔记——regression

    本章介绍了不同场景下使用的线性回归方法 一般情况:简单的线性回归 欠拟合:局部加权线性回归 特征数大于样本数:岭回归 或 lasso法 最后引出交叉验证,用来定量地找到最佳参数值 # _*_ codi ...

  2. java中equals和hashCode方法随笔二

    前几天看了篇关于java中equals和hashCode方法的解析 1.Object类中的equals方法和hashCode方法. Object类中的equals和hashCode方法简单明了,所有的 ...

  3. 【Luogu】P3232游走（高斯消元解概率）

    题目链接 参见远航之曲dalao的题解,我再写一遍的话就没啥意思了. #include<cstdio> #include<cstring> #include<algori ...

  4. 用js判断浏览器类型及设备

    <!DOCTYPE html> <html> <head> <title>JS判断是什么设备是什么浏览器</title> <meta ...

  5. P1438 无聊的数列 (线段树)

    题目链接 Solution 直接维护一个差分的线段树就好了. 其中线段树的节点代表 \(r\) 比 \(l\) 多多少. Code #include<bits/stdc++.h> #def ...

  6. 【bzoj1053】[HAOI2007]反素数ant

    对于任何正整数x,其约数的个数记作g(x).例如g(1)=1.g(6)=4.如果某个正整数x满足:g(x)>g(i) 0<i<x,则称x为反质数.例如,整数1,2,4,6等都是反质数 ...

  7. 详解keepalived配置和使用

    标签:keepalived 原创作品,允许转载,转载时请务必以超链接形式标明文章 原始出处 .作者信息和本声明.否则将追究法律责任.http://lanlian.blog.51cto.com/6790 ...

  8. 基于promise和script标签的jsonp

    function Jsonp(url){ var url=url.indexOf('?')>-1?url+"&callback=callback":url+" ...

  9. Day 18 函数之一

    函数参数: 1.形参变量只有在被调用时才分配内存单元,在调用结束时,即刻释放所分配的内存单元.因此,形参只在函数内部有效.函数调用结束返回主调用函数后则不能再使用该形参变量 2.实参可以是常量.变量. ...

  10. Day 15 python 之 列表、元组、字典

    基础: #! /usr/bin/env python # -*- coding: utf-8 -*- # __author__ = "DaChao" # Date: 2017/6/ ...