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. 用asp.net+Jquery+Ajax+sqlserver编写的 (英语六级记单词)

    开始(英语对程序员的重要性引用) 出处 英语的重要性已经毋庸置疑,对于程序员来说更甚,一些最新的技术资料是英文的,如果想进入外企英语也是一个很重要的条件.对于程序员来说怎样学习好英语,在此谈一下我的一 ...

  2. 大数据学习——KETTLE入门学习——kettle安装

    https://blog.csdn.net/u012637358/article/details/82593492 下载的kettle是汉化的 改成英文的 工具——选项——选择英文

  3. php默认有最大执行时间

    执行php默认有最大执行时间,默认30s,修改,不能设置’1h’,貌似单位不能修改

  4. Linux Shell系列教程之（十一）Shell while循环

    本文是Linux Shell系列教程的第(十一)篇,更多Linux Shell教程请看:Linux Shell系列教程 在上一篇Linux Shell系列教程之(十)Shell for循环中,我们已经 ...

  5. 【Luogu】P4363一双木棋（状压爆搜）

    题目链接 唉,只有AC了这道题才会感叹考场上没有想出解法的我是多么智障. 我甚至连任何想法都没有. 天啊我当时到底在想些什么. AC这道题我就能进前15了诶. 我们发现只要确定了轮廓线那么此时的状态就 ...

  6. NOIP2017赛前模拟(4):总结

    题目: 1.打牌 给定n个整数(n<=1000000),按照扑克牌对子(x,x)或者顺子(x,x+1,x+2)打出牌···问最多可以打出多少次对子或者顺子?牌的大小<=1000000 2. ...

  7. 算法复习——最小表示法（bzoj2882）

    题目: Description 小敏和小燕是一对好朋友. 他们正在玩一种神奇的游戏,叫Minecraft. 他们现在要做一个由方块构成的长条工艺品.但是方块现在是乱的,而且由于机器的要求,他们只能做到 ...

  8. MGW——美团点评高性能四层负载均衡

    转自美团点评技术博客:https://tech.meituan.com/MGW.html 前言 在高速发展的移动互联网时代,负载均衡有着举足轻重的地位,它是应用流量的入口,对应用的可靠性和性能起着决定 ...

  9. 配置vscode使它能够在自定义扩展名当中支持emment语法

    在.vue文件当中默认是不支持emment的,需要在vscode设置当中设置 "emmet.syntaxProfiles": { "vue-html": &qu ...

  10. 解决使用webbrowser请求url时数据传递丢失问题

    问题: 使用“ this.webBrowser.Url = new Uri(webBrowserUrl);”方式请求Action(Java Web)并传递数据,在webBrowserUrl中携带的参数 ...