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

时间：2022-09-14 21:25:25

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. Extjs 源码组成（4&period;0&period;7）

    (function(){})()形式的自执行,构建Ext对象(0~584) 1  设置全局对象EXt:global.Ext = {}, 2 实现了Ext对象面向对象编程的基础方法,如,apply,ex ...

  2. &lpar;基础篇&rpar;echo、print、print&lowbar;r、printf、sprintf、var&lowbar;dump的区别比较

    一.echo echo() 实际上不是一个函数,是php语句,因此您无需对其使用括号.不过,如果您希望向 echo() 传递一个以上的参数,那么使用括号会发生解析错误.而且echo是返回void的,并 ...

  3. Android 中的 Service 全面总结（转载）

    转载地址:http://www.cnblogs.com/newcj/archive/2011/05/30/2061370.html 感谢作者 Android 中的 Service 全面总结 1.Ser ...

  4. FusionChart 导出图片 功能实现（转载）

    FusionChart 导出图片 功能实现(转载) http://www.cnblogs.com/jiagoushi/archive/2013/02/05/2893468.html 题目:精美Fusi ...

  5. 正则表达式 &bsol;b （转）

    引用网上一段话: \b 是正则表达式规定的一个特殊代码(好吧,某些人叫它元字符,metacharacter),代表着单词的开头或结尾,也就是单词的分界处.虽然通常英文的单词是由空格,标点符号或者换行来 ...

  6. HTML5中 HTML格式化／HTML样式／链表／表格－样式 韩俊强的博客

    HTML5学习从简单到复杂,循环渐进! 每日更新关注:http://weibo.com/hanjunqiang  新浪微博! 1.HTML格式化 <!DOCTYPE html> <h ...

  7. 在编写Arcgis Engine 过程中对于接口引用和实现过程过产生的感悟

    Engine10.2版本 在vs里面新建类GeoMaoAO,并定义接口,在class中定义并实现,如下代码 以平时练习为例,我定义了一个接口,在里面定义了许多的控件,并在类中想要实现这一接口.如果在v ...

  8. C&num;中访问私有成员技巧

    源代码是别人的,你就不能修改源代码,只提供给你dll.或者你去维护别人的代码,源代码却有丢失.这样的情况如果你想知道私有成员的值,甚至去想直接调用类里面的私有方法.那怎么办呢?其实在.net中访问私有 ...

  9. java 数组复制

    http://www.cnblogs.com/zhengbin/p/5671403.html http://www.cnblogs.com/jjdcxy/p/5870524.html Java数组拷贝 ...

  10. SES 之全局搜索小记

    @2018-12-17 [小记] SES 使用全局搜索时,变量所在的头文件没有被检索出来,选中检索属性中的 Dependencies 就可以了

相关文章