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