首先使用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大法好,而且这两个布局真的比一般的 ...
随机推荐
- 28、editText只输入英文字母和'-'，用于授权码输入
InputFilter filter = new InputFilter() { @Override public CharSequence filter(CharSequence source, i ...
- xml报错“cvc-complex-type.2.4.c: The matching wildcard is strict, but no declaration can be found for element”
配置使用dubbo时,xml报错“cvc-complex-type.2.4.c: The matching wildcard is strict, but no declaration can be ...
- django model的设计
1 设计blog的显示界面: 在blog/admin.py修改 from django.contrib import admin from blog.models import BlogPost # ...
- TOJ3031: Multiple bfs
3031: Multiple Time Limit(Common/Java):2000MS/6000MS Memory Limit:65536KByte Total Submit: 60 ...
- hdu1595 最短路问题（dijkstra&&spfa）
find the longest of the shortest Time Limit: 1000/5000 MS (Java/Others) Memory Limit: 32768/32768 ...
- C++中使用Curl和JsonCpp调用有道翻译API实现在线翻译
使用C++开发一个在线翻译工具,这个想法在我大脑中过了好几遍了,所以就搜了下资料,得知网络上有很多翻译API,这里我选择我平时使用较多的有道翻译API进行在线翻译工具开发的练习.翻译API返回的结果常 ...
- caffe编译新问题
我在一台机子上,配置第二个caffe的时候,复制之前的Makefile文件,直接 make all 居然报错了报错如下 ndefined reference to cv::imread(cv::Str ...
- bzoj1143/2718 祭祀river（最大独立集）
[CTSC2008]祭祀river Time Limit: 10 Sec Memory Limit: 162 MBSubmit: 2175 Solved: 1098[Submit][Status] ...
- 解决Ubuntu系统中文乱码显示问题
sudo dpkg-reconfigure locales最后重启ubuntu. 重启后在系统设置--语言设置里面需要勾选中文,就会自动下载中文包,安装完成后再次重启就ok了.
- Tomcat是怎么工作的(2) -- 动手实现山寨版的简单Web Server
本文先讲解一下Java web server都是怎么工作的.web server也叫HTTP server——顾名思义它是用HTTP协议和客户端交互的.客户端一般就是各种各样的浏览器了.相信所有朋友都 ...