男丁格爾's 脫殼玩

沒錯!只要 600 元就能獲得我們團隊完整的協助，讓效果能迅速的整合到您的網站，並保證瀏覽器的相容性。
立刻申請!

Table Resizer 0.1

有時候表格不管怎樣去設定它的寬跟高都不一都能完全配合欄位中的資料，當想加大某一欄位時就要改它的寬度，如果能讓使用者自行去拖拉的話該有多好啊。因此 Table Resizer 套件就這樣產生了。只要先設定好 TH 標題之後，就能讓使用者藉由拖拉標題來縮放欄位的寬度了。

套件名稱：Table Resizer
套件版本：0.1
作者網站：http://os.arandomurl.com/jquerytableresizer/
套件網址：http://plugins.jquery.com/project/TableResizer
發佈日期：2008-04-23
檔案大小：5.70 KB
檔案下載：jquery.tableresizer.js

參數說明：

檢視原始碼 JavaScript

col_border(選填)
描述： 標題行底部邊框的設定
預設值： "2px solid #666"
 
row_border(選填)
描述： 標題列右部邊框的設定
預設值： "2px solid #666"

方法說明：

檢視原始碼 JavaScript

1 2	// 建立 tableresizer 效果 $(selector).tableresizer([options]);

使用範例：

檢視原始碼 JavaScript

<script type="text/javascript" src="jquery.js"></script>
<script type="text/javascript" src="jquery.tableresizer.js"></script>
<style type="text/css">
	td {
		padding:4px 9px;
		background:#F5F5F5;
	}     
	th {
		padding:4px 9px;
		background:#888;
		color:white;
	}
</style>
<script type="text/javascript">
	$(function(){
		// 設定 col_border 及 row_border 等值
		$("table").tableresizer({
			col_border:"2px solid red",
			row_border:"2px solid #f0f"
		});
	});
</script>
 
<body>
	<table>
		<tr>
			<th></th>
			<th>姓名</th>
			<th>性別</th>
			<th>年齡</th>
			<th>國別</th>
		</tr>
		<tr>
			<td>1</td>
			<td>阿珍</td>
			<td>女</td>
			<td>17</td>
			<td>台灣</td>
		</tr>
		<tr>
			<td>2</td>
			<td>歐巴馬</td>
			<td>男</td>
			<td>15</td>
			<td>美國</td>
		</tr>
		<tr>
			<td>3</td>
			<td>阿甘</td>
			<td>男</td>
			<td>20</td>
			<td>印度</td>
		</tr>
		<tr>
			<td>4</td>
			<td>雪子</td>
			<td>女</td>
			<td>23</td>
			<td>日本</td>
		</tr>
	</table>
</body>