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>