amazeui学习笔记--css（HTML元素5）--表格Table

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!MonthSavings
$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>

参考资源

【推广】 免费学中医，健康全家人
原文地址：https://www.cnblogs.com/Renyi-Fan/p/9011524.html