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. PHP获取文件大小

    通过filesize函数可以取得文件的大小,文件大小是以字节数表示的. $filename = '/data/webroot/usercode/code/resource/test.txt'; $si ...

  2. Springboot 获取yml、properties参数

    获取properties或yml文件的配置数据(两种方法)(默认的application文件或者自定义的yml和properties) 1.使用@Value()注解 1.1 配置数据 如:在prope ...

  3. WebView的截屏实现

    WebView的截屏主要有两种实现方式: 方式1: bitmap = webView.getDrawingCache(); 可是,webView必需要mWebView.setDrawingCacheE ...

  4. kettle(一)概述

    近期两个月一直和kettle打交道,从開始的没听说过,到如今能够熟练运用,不得不说项目驱动下,学习东西是最快的.好了,尽管使用kettle应付项目的任务绰绰有余.可是还是想系统的学习一下,总结一下.比 ...

  5. android 获取蓝牙已连接设备

    蓝牙如果手动配对并已连接,获取连接的设备: 1.检测连接状态: int a2dp = bluetoothAdapter.getProfileConnectionState(BluetoothProfi ...

  6. Gym 100952 F. Contestants Ranking

    http://codeforces.com/gym/100952/problem/F F. Contestants Ranking time limit per test 1 second memor ...

  7. vue prpos

    匹配某些值中的一个 type: { validator: function(value) { return ["success", "warning", &qu ...

  8. 洛谷 P1801 黑匣子_NOI导刊2010提高（06）（未完）

    P1801 黑匣子_NOI导刊2010提高(06) 题目描述 Black Box是一种原始的数据库.它可以储存一个整数数组,还有一个特别的变量i.最开始的时候Black Box是空的．而i等于0.这个 ...

  9. 数据结构基础（3）---C语言实现单链表

    #include<stdio.h> #include<malloc.h> #include<stdbool.h> /** **链表节点的定义 */ typedef ...

  10. poj2796

    #include <cstdio> /* * source poj.2796 * 题目: * 给定一个非负数的数组 其中value[l,r] = sum(l,r) * min (l,r); ...