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 ...