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: 内容超出容器宽度时显示水平滚动条。

     
  
      
           ...  
     

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

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

基本边框

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

     
          ...

圆角边框

同时添加 .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

     
          ...

单元格状态

表示表格状态的 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

     
          ...

紧凑型

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

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

响应式表格

• .am-text-nowrap: 禁止文字换行；
• .am-scrollable-horizontal: 内容超出容器宽度时显示水平滚动条。

以上两个 class 在「辅助类」中定义。

 Copy

-= 表格标题 =-	-= 表格标题 =-	-= 表格标题 =-	-= 表格标题 =-	-= 表格标题 =-	-= 表格标题 =-	-= 表格标题 =-	-= 表格标题 =-
表格数据	表格数据	表格数据	表格数据	表格数据	表格数据	表格数据	表格数据
表格数据	表格数据	表格数据	表格数据	表格数据	表格数据	表格数据	表格数据
表格数据	表格数据	表格数据	表格数据	表格数据	表格数据	表格数据	表格数据

     
  
      
        ... 
 
     

后续更新

2.4.x 新增

• <table> 上添加 .am-table-centered 实现单元格居中对齐
• 单元格上添加 .am-text-middle 可以实现垂直居中，同样，在单元格上添加其他文本对齐 class 可以实现想要的效果（参见）

 Copy

Savings for holiday!	Month	Savings
$50	January	$100
	February	$80

     
        
       
         
Savings for holiday!
         
Month
         
Savings
        
        
         
$50
         
January
         
$100
        
        
         
February
         
$80
        
       
     

所有样式叠加

 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

     
        ... 
 ... 
          
        
         
网站名称
         
网址
         
创建时间
        
       
       
       
         
Amaze UI(Active)
         
http://amazeui.org
         
2012-10-01
        
      
      

参考资源

• [表格排序 jQuery Table Sort] ()