amazeui学习笔记--css(HTML元素5)--表格Table
amazeui学习笔记--css(HTML元素5)--表格Table
一、总结
1、基本样式:am-table;直接模块名 <table class="am-table">
2、表格边框: 添加 .am-table-bordered
类。 <table class="am-table am-table-bordered">
3、圆角边框: 同时添加 .am-table-bordered
、 .am-table-radius
,外层圆角边框通过 box-shadow
实现。 <table class="am-table am-table-bordered am-table-radius am-table-striped">
4、单元格状态(颜色):就是那些基本颜色
.am-active
激活;.am-disabled
禁用;.am-primary
蓝色高亮;.am-success
绿色高亮;.am-warning
橙色高亮;.am-danger
红色高亮。
5、斑马纹效果及hover效果: <table class="am-table am-table-striped am-table-hover">
.am-table-striped
斑马纹效果.am-table-hover
hover 状态
6、紧凑型表格:添加 .am-table-compact
class,调整 padding
显示更紧凑的单元格。 <table class="am-table am-table-bordered am-table-striped am-table-compact">
7、响应式表格:
.am-text-nowrap
: 禁止文字换行;.am-scrollable-horizontal
: 内容超出容器宽度时显示水平滚动条。
<div class="am-scrollable-horizontal">
<table class="am-table am-table-bordered am-table-striped am-text-nowrap">
...
</table>
</div>
8、单元格对齐:
<table>
上添加.am-table-centered
实现单元格居中对齐- 单元格上添加
.am-text-middle
可以实现垂直居中,同样,在单元格上添加其他文本对齐 class 可以实现想要的效果(参见辅助类)
二、表格Table
使用时注意 <table>
HTML 结构的完整性。
表格相关 JS 插件:
基本样式
添加 .am-table
。
网站名称 | 网址 | 创建时间 |
---|---|---|
Amaze UI | http://amazeui.org | 2012-10-01 |
Amaze UI | http://amazeui.org | 2012-10-01 |
Amaze UI(Active) | http://amazeui.org | 2012-10-01 |
Amaze UI | http://amazeui.org | 2012-10-01 |
Amaze UI | http://amazeui.org | 2012-10-01 |
<table class="am-table">
<thead>
<tr>
<th>网站名称</th>
<th>网址</th>
<th>创建时间</th>
</tr>
</thead>
<tbody>
<tr>
<td>Amaze UI</td>
<td>http://amazeui.org</td>
<td>2012-10-01</td>
</tr>
<tr>
<td>Amaze UI</td>
<td>http://amazeui.org</td>
<td>2012-10-01</td>
</tr>
<tr class="am-active">
<td>Amaze UI(Active)</td>
<td>http://amazeui.org</td>
<td>2012-10-01</td>
</tr>
<tr>
<td>Amaze UI</td>
<td>http://amazeui.org</td>
<td>2012-10-01</td>
</tr>
<tr>
<td>Amaze UI</td>
<td>http://amazeui.org</td>
<td>2012-10-01</td>
</tr>
</tbody>
</table>
基本边框
添加 .am-table-bordered
类。
网站名称 | 网址 | 创建时间 |
---|---|---|
Amaze UI | http://amazeui.org | 2012-10-01 |
Amaze UI | http://amazeui.org | 2012-10-01 |
Amaze UI | http://amazeui.org | 2012-10-01 |
Amaze UI | http://amazeui.org | 2012-10-01 |
Amaze UI | http://amazeui.org | 2012-10-01 |
<table class="am-table am-table-bordered">
...
</table>
圆角边框
同时添加 .am-table-bordered
、 .am-table-radius
,外层圆角边框通过 box-shadow
实现。
网站名称 | 网址 | 创建时间 |
---|---|---|
Amaze UI | http://amazeui.org | 2012-10-01 |
Amaze UI | http://amazeui.org | 2012-10-01 |
Amaze UI | http://amazeui.org | 2012-10-01 |
Amaze UI | http://amazeui.org | 2012-10-01 |
Amaze UI | http://amazeui.org | 2012-10-01 |
<table class="am-table am-table-bordered am-table-radius am-table-striped">
...
</table>
单元格状态
表示表格状态的 class 添加到 tr
整行整行,添加到 td
高亮单元格。
.am-active
激活;.am-disabled
禁用;.am-primary
蓝色高亮;.am-success
绿色高亮;.am-warning
橙色高亮;.am-danger
红色高亮。
Class | 状态描述 | 目标元素 |
---|---|---|
.am-active | 激活 | td |
.am-active | 激活 | tr |
.am-disabled | 禁用 | td |
.am-disabled | 禁用 | tr |
.am-primary | 蓝色高亮 | td |
.am-primary | 蓝色高亮 | tr |
.am-success | 绿色高亮 | td |
.am-success | 绿色高亮 | tr |
.am-warning | 橙色高亮 | td |
.am-warning | 橙色高亮 | tr |
.am-danger | 红色高亮 | td |
.am-danger | 红色高亮 | tr |
其他效果
.am-table-striped
斑马纹效果.am-table-hover
hover 状态
网站名称 | 网址 | 创建时间 |
---|---|---|
Amaze UI | http://amazeui.org | 2012-10-01 |
Amaze UI | http://amazeui.org | 2012-10-01 |
Amaze UI | http://amazeui.org | 2012-10-01 |
Amaze UI | http://amazeui.org | 2012-10-01 |
Amaze UI | http://amazeui.org | 2012-10-01 |
<table class="am-table am-table-striped am-table-hover">
...
</table>
紧凑型
添加 .am-table-compact
class,调整 padding
显示更紧凑的单元格。
网站名称 | 网址 | 创建时间 |
---|---|---|
Amaze UI | http://amazeui.org | 2012-10-01 |
Amaze UI | http://amazeui.org | 2012-10-01 |
Amaze UI(Active) | http://amazeui.org | 2012-10-01 |
Amaze UI | http://amazeui.org | 2012-10-01 |
Amaze UI | http://amazeui.org | 2012-10-01 |
<table class="am-table am-table-bordered am-table-striped am-table-compact">
<thead>
<tr>
<th>网站名称</th>
<th>网址</th>
<th>创建时间</th>
</tr>
</thead>
<tbody>
<tr>
<td>Amaze UI</td>
<td>http://amazeui.org</td>
<td>2012-10-01</td>
</tr>
<tr>
<td>Amaze UI</td>
<td>http://amazeui.org</td>
<td>2012-10-01</td>
</tr>
<tr class="am-active">
<td>Amaze UI(Active)</td>
<td>http://amazeui.org</td>
<td>2012-10-01</td>
</tr>
<tr>
<td>Amaze UI</td>
<td>http://amazeui.org</td>
<td>2012-10-01</td>
</tr>
<tr>
<td>Amaze UI</td>
<td>http://amazeui.org</td>
<td>2012-10-01</td>
</tr>
</tbody>
</table>
响应式表格
.am-text-nowrap
: 禁止文字换行;.am-scrollable-horizontal
: 内容超出容器宽度时显示水平滚动条。
以上两个 class 在「辅助类」中定义。
-= 表格标题 =- | -= 表格标题 =- | -= 表格标题 =- | -= 表格标题 =- | -= 表格标题 =- | -= 表格标题 =- | -= 表格标题 =- | -= 表格标题 =- |
---|---|---|---|---|---|---|---|
表格数据 | 表格数据 | 表格数据 | 表格数据 | 表格数据 | 表格数据 | 表格数据 | 表格数据 |
表格数据 | 表格数据 | 表格数据 | 表格数据 | 表格数据 | 表格数据 | 表格数据 | 表格数据 |
表格数据 | 表格数据 | 表格数据 | 表格数据 | 表格数据 | 表格数据 | 表格数据 | 表格数据 |
<div class="am-scrollable-horizontal">
<table class="am-table am-table-bordered am-table-striped am-text-nowrap">
...
</table>
</div>
后续更新
2.4.x 新增
<table>
上添加.am-table-centered
实现单元格居中对齐- 单元格上添加
.am-text-middle
可以实现垂直居中,同样,在单元格上添加其他文本对齐 class 可以实现想要的效果(参见辅助类)
Savings for holiday! | Month | Savings |
---|---|---|
$50 | January | $100 |
February | $80 |
<table class="am-table am-table-bordered am-table-centered">
<tr>
<th>Savings for holiday!</th>
<th>Month</th>
<th>Savings</th>
</tr>
<tr>
<td rowspan="2" class="am-text-middle">$50</td>
<td>January</td>
<td>$100</td>
</tr>
<tr>
<td>February</td>
<td>$80</td>
</tr>
</table>
所有样式叠加
网站名称 | 网址 | 创建时间 |
---|---|---|
Amaze UI | http://amazeui.org | 2012-10-01 |
Amaze UI | http://amazeui.org | 2012-10-01 |
Amaze UI(Active) | http://amazeui.org | 2012-10-01 |
Amaze UI | http://amazeui.org | 2012-10-01 |
Amaze UI | http://amazeui.org | 2012-10-01 |
<table class="am-table am-table-bordered am-table-striped am-table-hover">
<thead>
<tr>
<th>网站名称</th>
<th>网址</th>
<th>创建时间</th>
</tr>
</thead>
<tbody>
...
<tr class="am-active">
<td>Amaze UI(Active)</td>
<td>http://amazeui.org</td>
<td>2012-10-01</td>
</tr>
...
</tbody>
</table>
参考资源
- [表格排序 jQuery Table Sort] (https://github.com/kylefox/jquery-tablesort)
- Tablesaw - A set of jQuery plugins for responsive tables
- FooTable - jQuery plugin to make HTML tables responsive
amazeui学习笔记--css(HTML元素5)--表格Table的更多相关文章
- amazeui学习笔记--css(HTML元素4)--图片image
amazeui学习笔记--css(HTML元素4)--图片image 一.总结 1.响应式图片:随着页面宽度而变化 .am-img-responsive class. <img src=&quo ...
- amazeui学习笔记--css(HTML元素3)--表单Form
amazeui学习笔记--css(HTML元素3)--表单Form 一.总结 1.form样式使用:在容器上添加 .am-form class,容器里的子元素才会应用 Amaze UI 定义的样式. ...
- amazeui学习笔记--css(HTML元素2)--代码Code
amazeui学习笔记--css(HTML元素2)--代码Code 一.总结 1.行内代码:code标签<code> 2.代码片段:pre标签<pre> 3.限制代码块高度:添 ...
- amazeui学习笔记--css(HTML元素1)--按钮Button
amazeui学习笔记--css(HTML元素1)--按钮Button 一.总结 1.button的基本使用:a.am-btn 在要应用按钮样式的元素上添加 .am-btn,b.颜色 再设置相应的颜色 ...
- amazeui学习笔记--css(基本样式3)--文字排版Typography
amazeui学习笔记--css(基本样式3)--文字排版Typography 一.总结 1.字体:amaze默认非 衬线字体(sans-serif) 2.引用块blockquote和定义列表:引用块 ...
- amazeui学习笔记--css(布局相关3)--辅助类Utility
amazeui学习笔记--css(布局相关3)--辅助类Utility 一.总结 1.元素清除浮动: 添加 am-cf 这个 class 即可 2.水平滚动: .am-scrollable-horiz ...
- amazeui学习笔记--css(布局相关1)--网格Grid
amazeui学习笔记--css(布局相关1)--网格Grid 一.总结 基本使用 1.div+class布局:amaze里面采取的就是div+class的布局方式 <div class=&q ...
- amazeui学习笔记--css(基本样式2)--基础设置Base
amazeui学习笔记--css(基本样式2)--基础设置Base 一.总结 1.盒子模型:外margin,内padding,这里的内外指的边框 2.border-box:Amaze UI 将所有元素 ...
- amazeui学习笔记--css(基本样式)--样式统一Normalize
amazeui学习笔记--css(基本样式)--样式统一Normalize 一.总结 1.统一浏览器默认样式: Amaze UI 也使用了 normalize.css,就是让不同浏览器显示相同的样式 ...
随机推荐
- route---设置Linux内核中的网络路由表
route命令用来显示并设置Linux内核中的网络路由表,route命令设置的路由主要是静态路由.要实现两个不同的子网之间的通信,需要一台连接两个网络的路由器,或者同时位于两个网络的网关来实现. 在L ...
- PHP 使用Apache 中的ab 測试站点的压力性能
打开Apacheserver的安装路径(我用的是 WampServer),在bin文件夹中有一个ab.exe的可运行程序,它就是要介绍的压力測试工具. watermark/2/text/aHR0cDo ...
- Android ScrollView滚动实现大众点评、网易云音乐评论悬停效果
今天听着网易云音乐,写着代码,真是爽翻了. http://blog.csdn.net/linshijun33/article/details/47910833 网易云音乐这个产品亮点应该在评论这一模块 ...
- CesiumJS - 3D Tiles BIM
CesiumJS - 3D Tiles BIM eryar@163.com 1. Introduction CesiumJS is an open-source JavaScript library ...
- hadoop2.x HDFS快照介绍
说明:由于近期正好在研究hadoop的快照机制.看官网上的文档讲的非常仔细.就顺手翻译了.也没有去深究一些名词的标准译法,所以可能有些翻译和使用方法不是非常正确,莫要介意~~ 原文地址:(Apache ...
- vim状态保存跟恢复
当我们结束了一天的工作的时候,可能手头的工作仅仅进行了一半,比如我们正在用vim修改一个android 问题,我们定位了问题关键,牵扯到了好几个类,如果这时候我们直接把vim关闭了,那我们下次还要重新 ...
- [Codeforces558E]A Simple Task 线段树
链接 题意:给定一个长度不超过 \(10^5\) 的字符串(小写英文字母),和不超过5000个操作. 每个操作 L R K 表示给区间[L,R]的字符串排序,K=1为升序,K=0为降序. 最后输出最终 ...
- 配置Lotus Domino集群视频详解
IBM Lotus Domino Server 有个最重要的高可用特新就是集群,它对于任何使用 Domino 服务器的组织,让用户能够持续访问它们的数据库,保证业务不间断运行.下面通过两个视频来学习如 ...
- 「HAOI2018」字串覆盖
「HAOI2018」字串覆盖 题意: 给你两个字符串,长度都为\(N\),以及一个参数\(K\),有\(M\)个询问,每次给你一个\(B\)串的一个子串,问用这个字串去覆盖\(A\)串一段区间的最 ...
- CodeForces 159c String Manipulation 1.0
String Manipulation 1.0 Time Limit: 3000ms Memory Limit: 262144KB This problem will be judged on Cod ...