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

 Copy
网站名称 网址 创建时间
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 类。

 Copy
网站名称 网址 创建时间
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 实现。

 Copy
网站名称 网址 创建时间
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 状态
 Copy
网站名称 网址 创建时间
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 显示更紧凑的单元格。

 Copy
网站名称 网址 创建时间
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 在「辅助类」中定义。

 Copy
-= 表格标题 =- -= 表格标题 =- -= 表格标题 =- -= 表格标题 =- -= 表格标题 =- -= 表格标题 =- -= 表格标题 =- -= 表格标题 =-
表格数据 表格数据 表格数据 表格数据 表格数据 表格数据 表格数据 表格数据
表格数据 表格数据 表格数据 表格数据 表格数据 表格数据 表格数据 表格数据
表格数据 表格数据 表格数据 表格数据 表格数据 表格数据 表格数据 表格数据
<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 可以实现想要的效果(参见辅助类
 Copy
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>

所有样式叠加

 Copy
网站名称 网址 创建时间
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>

参考资源

amazeui学习笔记--css(HTML元素5)--表格Table的更多相关文章

  1. amazeui学习笔记--css(HTML元素4)--图片image

    amazeui学习笔记--css(HTML元素4)--图片image 一.总结 1.响应式图片:随着页面宽度而变化 .am-img-responsive class. <img src=&quo ...

  2. amazeui学习笔记--css(HTML元素3)--表单Form

    amazeui学习笔记--css(HTML元素3)--表单Form 一.总结 1.form样式使用:在容器上添加 .am-form class,容器里的子元素才会应用 Amaze UI 定义的样式. ...

  3. amazeui学习笔记--css(HTML元素2)--代码Code

    amazeui学习笔记--css(HTML元素2)--代码Code 一.总结 1.行内代码:code标签<code> 2.代码片段:pre标签<pre> 3.限制代码块高度:添 ...

  4. amazeui学习笔记--css(HTML元素1)--按钮Button

    amazeui学习笔记--css(HTML元素1)--按钮Button 一.总结 1.button的基本使用:a.am-btn 在要应用按钮样式的元素上添加 .am-btn,b.颜色 再设置相应的颜色 ...

  5. amazeui学习笔记--css(基本样式3)--文字排版Typography

    amazeui学习笔记--css(基本样式3)--文字排版Typography 一.总结 1.字体:amaze默认非 衬线字体(sans-serif) 2.引用块blockquote和定义列表:引用块 ...

  6. amazeui学习笔记--css(布局相关3)--辅助类Utility

    amazeui学习笔记--css(布局相关3)--辅助类Utility 一.总结 1.元素清除浮动: 添加 am-cf 这个 class 即可 2.水平滚动: .am-scrollable-horiz ...

  7. amazeui学习笔记--css(布局相关1)--网格Grid

    amazeui学习笔记--css(布局相关1)--网格Grid 一.总结 基本使用 1.div+class布局:amaze里面采取的就是div+class的布局方式  <div class=&q ...

  8. amazeui学习笔记--css(基本样式2)--基础设置Base

    amazeui学习笔记--css(基本样式2)--基础设置Base 一.总结 1.盒子模型:外margin,内padding,这里的内外指的边框 2.border-box:Amaze UI 将所有元素 ...

  9. amazeui学习笔记--css(基本样式)--样式统一Normalize

    amazeui学习笔记--css(基本样式)--样式统一Normalize 一.总结 1.统一浏览器默认样式: Amaze UI 也使用了 normalize.css,就是让不同浏览器显示相同的样式 ...

随机推荐

  1. route---设置Linux内核中的网络路由表

    route命令用来显示并设置Linux内核中的网络路由表,route命令设置的路由主要是静态路由.要实现两个不同的子网之间的通信,需要一台连接两个网络的路由器,或者同时位于两个网络的网关来实现. 在L ...

  2. PHP 使用Apache 中的ab 測试站点的压力性能

    打开Apacheserver的安装路径(我用的是 WampServer),在bin文件夹中有一个ab.exe的可运行程序,它就是要介绍的压力測试工具. watermark/2/text/aHR0cDo ...

  3. Android ScrollView滚动实现大众点评、网易云音乐评论悬停效果

    今天听着网易云音乐,写着代码,真是爽翻了. http://blog.csdn.net/linshijun33/article/details/47910833 网易云音乐这个产品亮点应该在评论这一模块 ...

  4. CesiumJS - 3D Tiles BIM

    CesiumJS - 3D Tiles BIM eryar@163.com 1. Introduction CesiumJS is an open-source JavaScript library ...

  5. hadoop2.x HDFS快照介绍

    说明:由于近期正好在研究hadoop的快照机制.看官网上的文档讲的非常仔细.就顺手翻译了.也没有去深究一些名词的标准译法,所以可能有些翻译和使用方法不是非常正确,莫要介意~~ 原文地址:(Apache ...

  6. vim状态保存跟恢复

    当我们结束了一天的工作的时候,可能手头的工作仅仅进行了一半,比如我们正在用vim修改一个android 问题,我们定位了问题关键,牵扯到了好几个类,如果这时候我们直接把vim关闭了,那我们下次还要重新 ...

  7. [Codeforces558E]A Simple Task 线段树

    链接 题意:给定一个长度不超过 \(10^5\) 的字符串(小写英文字母),和不超过5000个操作. 每个操作 L R K 表示给区间[L,R]的字符串排序,K=1为升序,K=0为降序. 最后输出最终 ...

  8. 配置Lotus Domino集群视频详解

    IBM Lotus Domino Server 有个最重要的高可用特新就是集群,它对于任何使用 Domino 服务器的组织,让用户能够持续访问它们的数据库,保证业务不间断运行.下面通过两个视频来学习如 ...

  9. 「HAOI2018」字串覆盖

    「HAOI2018」字串覆盖 题意: ​ 给你两个字符串,长度都为\(N\),以及一个参数\(K\),有\(M\)个询问,每次给你一个\(B\)串的一个子串,问用这个字串去覆盖\(A\)串一段区间的最 ...

  10. CodeForces 159c String Manipulation 1.0

    String Manipulation 1.0 Time Limit: 3000ms Memory Limit: 262144KB This problem will be judged on Cod ...