首先使用flex制作table
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的更多相关文章
- Css制作table细线表格
制作细线表格,我想应该是最基本的css知识了,记录下来巩固下. 推荐: table{ border-collapse:collapse; border: 1px solid #000000; } td ...
- VUE2.0 饿了吗视频学习笔记（七-终）：compute,循环,flex,display:table
一.star组件使用到了computed属性 computed相当于属性的一个实时计算,当对象的某个值改变的时候,会进行实时计算. computed: { starType() { return 's ...
- HTML布局四剑客-Flex,Grid,Table,Float
前言 在HTML布局中有很多的选择,同一种表现方式可以使用不同的方法来实现.下面来对四种最常见的布局方式进行阐述和解释,它们分别是Float,Table,Grid和Flex Float 第一位出场的就 ...
- 关于html 制作table的一个注意点
数据分析,一般都需要显示数据,就需要使用html做复杂的表格.复杂表格一般是对td的rowspan .colspan属性值. 在html中<td> 标签定义 HTML 表格中的标准单元格. ...
- jQuery制作table表格布局插件带有列左右拖动效果
压缩包:http://www.xwcms.net/js/bddm/99004.html
- 微信小程序简易table组件实现
前提:微信小程序自1.6.3基础库版本库开始支持简洁组件,之前的版本因不支持,故在引用组件处默认为空节点.关于微信小程序已有模板为何还需构建组件?一是因为组件可以更方便的自定义并绑定行为,二是在其他页 ...
- 杂项：flex （adobe flex）
ylbtech-杂项:Flex (Adobe Flex) Flex指Adobe Flex,基于其专有的Macromedia Flash平台,它是涵盖了支持RIA(Rich Internet Appli ...
- 通过J2EE Web工程添加Flex项目，进行BlazeDS开发
http://www.cnblogs.com/noam/archive/2010/07/22/1782955.html 环境:Eclipse 7.5 + Flex Builder 4 plugin f ...
- 小白入门篇:flex布局
--前言 因为这个星期写一个小的项目用到flex布局和grid布局,虽然这两种布局都是兼容性都有问题,但是别急,我觉的以后肯定是会发展并且流行起来的,毕竟google大法好,而且这两个布局真的比一般的 ...
随机推荐
- Selenium WebDriver-打开3个网址截图，文件夹用年月日命名，图片用当前时分秒命名
import os import os.path import time from selenium import webdriver urls=["http://www.baidu.com ...
- 解读Loadrunner网页细分图（Web Page Diagnostics）
[转载的地址]https://www.cnblogs.com/littlecat15/p/9456376.html 一.启用网页细分图 首先在Controller场景设计运行之前,需要在菜单栏中设置D ...
- 设计模式之单例模式 Singleton实现
饿汉式 饿汉式单例模式,static变量会在类装载时初始化,此时也不会涉及多个线程对象访问该对象的问题.虚拟机保证只会装载一次该类,肯定不会发生并发访问的问题, 因此可以省略synchronized关 ...
- Tensorflow 自适应学习速率
Tensorflow 自适应学习速率 在模型的初期的时候,往往设置为较大的学习速率比较好,因为距离极值点比较远,较大的学习速率可以快速靠近极值点:而,后期,由于已经靠近极值点,模型快收敛了,此时,采用 ...
- 【java基础 17】集合中各实现类的性能分析
大致的再回顾一下java集合框架的基本情况 一.各Set实现类的性能分析 1.1,HashSet用于添加.查询 HashSet和TreeSet是Set的两个典型实现,HashSet的性能总是比Tree ...
- php preg_replace去除html xml 注释
php preg_replace去除html xml 注释 //不确定是否最优 $content = preg_replace('/<!--((?!-->).)*-->/s', '' ...
- 【Luogu】P2801教主的魔法（分块）
题目链接 激动qwq.这是我A的第一道分块. 分块之后对块内元素暴力sort.修改的时候对于整块打个标记,查询的时候只需要查C-tag就行了 对于非整块,暴力修改,改完之后sort 对于查询……非整块 ...
- poj 1081 To The Max
To The Max Time Limit: 2000/1000 MS (Java/Others) Memory Limit: 65536/32768 K (Java/Others)Total ...
- 【Visual Studio】Windows program compatibility mode is on, turn it off……
[问题描述]Windows 10上安装 Visual Studio Ultimate 2013,出现下面错误: [解决方案]将.iso文件解压到硬盘再安装.
- 手機 停充的種類 與 量測 power consumption 功率 使用 bq25896 bq25890
Precondition : 配有 power path 功能的 BQ2589 手機. 接上 pc usb port. Origin : 今天有同事問我, 手機是否可以在接上 pc usb port ...