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

目錄

• 基本樣式
• 基本邊框
• 圓角邊框
• 單元格狀態
• 其他效果
• 緊湊型
• 響應式表格
• 后續更新
  • 2.4.x 新增
• 所有樣式疊加
• 參考資源

使用時注意 <table> HTML 結構的完整性。

表格相關 JS 插件：

• jQuery DataTables

基本樣式

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

參考資源

• [表格排序 jQuery Table Sort] (https://github.com/kylefox/jquery-tablesort)
• Tablesaw - A set of jQuery plugins for responsive tables
• FooTable - jQuery plugin to make HTML tables responsive