Home » jQuery 外掛

[jQ]Responsive Tables

[ 日期： | 瀏覽：13,229 | 迴響：搶沙發 ]
範例 1
請協助我把這個效果加到我的網站 (只要 1,000 元)
沒錯!只要 1,000 元就能獲得我們團隊完整的協助，讓效果能迅速的整合到您的網站，並保證瀏覽器的相容性。
立刻申請!

responsive-tables-0

Responsive Tables 基本上不用寫任何程式就能在 RWD 時自動產生類似 Excel 凍結欄位的外掛套件！只要將要套上效果的表格中加入 .responsive 樣式名稱就可以了。

套件名稱：Responsive Tables
套件網址：N/A
作者網站：http://zurb.com/playground/responsive-tables
套件網址：N/A
發佈日期：2013-05-07
檔案大小：1.70 KB
檔案下載：responsive-tables.js responsive-tables.css

參數選項說明：

檢視原始碼 JavaScript
1

無

方法說明：

檢視原始碼 JavaScript
1

無

使用範例：

檢視原始碼 JavaScript
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95

<link type="text/css" rel="stylesheet" href="responsive-tables.css" />
<script type="text/javascript" src="jquery.js"></script>
<script type="text/javascript" src="responsive-tables.js"></script>
<style type="text/css">
	table {
		width: 100%;
		border: 1px solid #666;
	}
</style>
 
<body>
	<table id="table1" class="responsive">
		<tr>
			<th>Column A</th>
			<th>Column B</th>
			<th>Column C</th>
			<th>Column D</th>
			<th>Column E</th>
			<th>Column F</th>
			<th>Column G</th>
		</tr>
		<tr>
			<td>Content Cell A1</td>
			<td>Content Cell B1</td>
			<td>Content Cell C1</td>
			<td>Content Cell D1</td>
			<td>Content Cell E1</td>
			<td>Content Cell F1</td>
			<td>Content Cell G1</td>
		</tr>
		<tr>
			<td>Content Cell A2</td>
			<td>Content Cell B2</td>
			<td>Content Cell C2</td>
			<td>Content Cell D2</td>
			<td>Content Cell E2</td>
			<td>Content Cell F2</td>
			<td>Content Cell G2</td>
		</tr>
		<tr>
			<td>Content Cell A3</td>
			<td>Content Cell B3</td>
			<td>Content Cell C3</td>
			<td>Content Cell D3</td>
			<td>Content Cell E3</td>
			<td>Content Cell F3</td>
			<td>Content Cell G3</td>
		</tr>
		<tr>
			<td>Content Cell A4</td>
			<td>Content Cell B4</td>
			<td>Content Cell C4</td>
			<td>Content Cell D4</td>
			<td>Content Cell E4</td>
			<td>Content Cell F4</td>
			<td>Content Cell G4</td>
		</tr>
		<tr>
			<td>Content Cell A5</td>
			<td>Content Cell B5</td>
			<td>Content Cell C5</td>
			<td>Content Cell D5</td>
			<td>Content Cell E5</td>
			<td>Content Cell F5</td>
			<td>Content Cell G5</td>
		</tr>
		<tr>
			<td>Content Cell A6</td>
			<td>Content Cell B6</td>
			<td>Content Cell C6</td>
			<td>Content Cell D6</td>
			<td>Content Cell E6</td>
			<td>Content Cell F6</td>
			<td>Content Cell G6</td>
		</tr>
		<tr>
			<td>Content Cell A7</td>
			<td>Content Cell B7</td>
			<td>Content Cell C7</td>
			<td>Content Cell D7</td>
			<td>Content Cell E7</td>
			<td>Content Cell F7</td>
			<td>Content Cell G7</td>
		</tr>
		<tr>
			<td>Content Cell A8</td>
			<td>Content Cell B8</td>
			<td>Content Cell C8</td>
			<td>Content Cell D8</td>
			<td>Content Cell E8</td>
			<td>Content Cell F8</td>
			<td>Content Cell G8</td>
		</tr>
	</table>
</body>
範例 1 範例 2

檔案描述
基本的範例檔案(免空) 開始下載
基本的範例檔案 會員限定

備註:
這外掛套件基本上只會凍結第一個欄位，但有同學上課時有問到是否能凍結兩個欄位，因此筆者就將這外掛稍微改造一下，responsive-tables-modify.js 中的第 3 行是可以讓使用者自訂是要凍結那幾欄欄位，第一欄是 1。效果可以參考上面的第二個範例預覽。

發表迴響