<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<!-- it is transitional only because of using width='xx%' property in table example -->
<html xmlns='http://www.w3.org/1999/xhtml'><head>
<!-- meta http-equiv="Content-Type" content="text/html; charset=windows-1251" / -->
<link rel='stylesheet' href='resizable.css' type='text/css' media='screen' />
<title>Resizable Table Columns Demo</title>
</head><body>
<!-- 牧, 牧 -- 子?呐滔 ?紫疼怕钨?姓谫邑肆?.. -->
<script type='text/javascript' src='resizable-tables.js'></script>
<div class='page'>
<h1>Resizable Table Columns Demo</h1>
<p>
Try to resize columns in tables below<sup>1</sup>. Guess how to do this... ;)
</p>
<table id='table1' border="1" class='resizable'>
<tr>
<th width='10%' onclick='alert("Bow!!! Do not be afraid!");'>cell 11</th>
<th width='20%'>cell 12</th>
<th width='40%'>cell 13</th>
</tr>
<tr>
<td>cell 21</td>
<td>cell 22</td>
<td>cell 23</td>
</tr>
<tr>
<td>cell 31</td>
<td>cell 32</td>
<td>cell 33</td>
</tr>
</table>
<p>and another table:</p>
<table align="center" width="98%">
<tr>
<td>
<div style="overflow:auto; height:350px; width:100%;">
<table class="resizable" cellspacing="1" align="Left" border="0" id="Grd_folder" style="font-weight:normal;font-style:normal;text-decoration:none;width:96%;"><tr>
<th width='20%' >cell 11</th>
<th width='20%'>cell 12</th>
<th width='10%'>cell 13</th>
<th width='10%'>cell 14</th>
<th width='10%'>cell 15</th>
<th width='10%'>cell 16</th>
<th width='10%'>cell 17</th>
</tr>
<tr>
<td>cell 21</td>
<td align="center" style="background-color:White;border-color:#99CCFF;cursor:hand;"><span id="Grd_folder_ctl19_Lab_folder">sdfsdfsdfsdfsdfsdfsdfdsfsdfd cell 22</span></td>
<td>cell 23</td>
<td>cell 24</td>
<td>cell 25</td>
<td>cell 26</td>
<td>cell 27</td>
</tr>
<tr>
<td>cell 31</td>
<td>cell 32</td>
<td>cell 33</td>
<td>cell 34</td>
<td>cell 35</td>
<td>cell 36</td>
<td>cell 37</td>
</tr>
<tr>
<td>cell 21</td>
<td align="center" style="background-color:White;border-color:#99CCFF;cursor:hand;"><span id="Grd_folder_ctl19_Lab_folder">sdfsdfsdfsdfsdfsdfsdfdsfsdfd cell 22</span></td>
<td>cell 23</td>
<td>cell 24</td>
<td>cell 25</td>
<td>cell 26</td>
<td>cell 27</td>
</tr>
<tr>
<td>cell 21</td>
<td align="center" style="background-color:White;border-color:#99CCFF;cursor:hand;"><span id="Grd_folder_ctl19_Lab_folder">sdfsdfsdfsdfsdfsdfsdfdsfsdfd cell 22</span></td>
<td>cell 23</td>
<td>cell 24</td>
<td>cell 25</td>
<td>cell 26</td>
<td>cell 27</td>
</tr>
<tr>
<td>cell 21</td>
<td align="center" style="background-color:White;border-color:#99CCFF;cursor:hand;"><span id="Grd_folder_ctl19_Lab_folder">sdfsdfsdfsdfsdfsdfsdfdsfsdfd cell 22</span></td>
<td>cell 23</td>
<td>cell 24</td>
<td>cell 25</td>
<td>cell 26</td>
<td>cell 27</td>
</tr>
<tr>
<td>cell 21</td>
<td align="center" style="background-color:White;border-color:#99CCFF;cursor:hand;"><span id="Grd_folder_ctl19_Lab_folder">sdfsdfsdfsdfsdfsdfsdfdsfsdfd cell 22</span></td>
<td>cell 23</td>
<td>cell 24</td>
<td>cell 25</td>
<td>cell 26</td>
<td>cell 27</td>
</tr>
<tr>
<td>cell 21</td>
<td align="center" style="background-color:White;border-color:#99CCFF;cursor:hand;"><span id="Grd_folder_ctl19_Lab_folder">sdfsdfsdfsdfsdfsdfsdfdsfsdfd cell 22</span></td>
<td>cell 23</td>
<td>cell 24</td>
<td>cell 25</td>
<td>cell 26</td>
<td>cell 27</td>
</tr>
<tr>
<td>cell 21</td>
<td align="center" style="background-color:White;border-color:#99CCFF;cursor:hand;"><span id="Grd_folder_ctl19_Lab_folder">sdfsdfsdfsdfsdfsdfsdfdsfsdfd cell 22</span></td>
<td>cell 23</td>
<td>cell 24</td>
<td>cell 25</td>
<td>cell 26</td>
<td>cell 27</td>
</tr>
<tr>
<td>cell 21</td>
<td align="center" style="background-color:White;border-color:#99CCFF;cursor:hand;"><span id="Grd_folder_ctl19_Lab_folder">sdfsdfsdfsdfsdfsdfsdfdsfsdfd cell 22</span></td>
<td>cell 23</td>
<td>cell 24</td>
<td>cell 25</td>
<td>cell 26</td>
<td>cell 27</td>
</tr>
<tr align="center" OnmouseOver="javascript:this.className='GridRow10';" OnmouseOut="javascript:this.className='GridRow00';" id="TR_Grd_folder_ctl10_Lab_folder" onClick="javascript:SelectFolder('E:\\ad\\watchfolder',this);" ondblclick="javascript:IntoFolder('E:\\ad\\watchfolder');" title="E:\ad\watchfolder" style="background-color:White;border-color:#99CCFF;cursor:hand;">
<td>cell 21</td>
<td align="center" style="background-color:White;border-color:#99CCFF;cursor:hand;"><span id="Grd_folder_ctl19_Lab_folder">sdfsdfsdfsdfsdfsdfsdfdsfsdfd cell 22</span></td>
<td>cell 23</td>
<td>cell 24</td>
<td>cell 25</td>
<td>cell 26</td>
<td>cell 27</td>
</tr>
<tr>
<td>cell 21</td>
<td align="center" style="background-color:White;border-color:#99CCFF;cursor:hand;"><span id="Grd_folder_ctl19_Lab_folder">sdfsdfsdfsdfsdfsdfsdfdsfsdfd cell 22</span></td>
<td>cell 23</td>
<td>cell 24</td>
<td>cell 25</td>
<td>cell 26</td>
<td>cell 27</td>
</tr>
<tr>
<td>cell 21</td>
<td align="center" style="background-color:White;border-color:#99CCFF;cursor:hand;"><span id="Grd_folder_ctl19_Lab_folder">sdfsdfsdfsdfsdfsdfsdfdsfsdfd cell 22</span></td>
<td>cell 23</td>
<td>cell 24</td>
<td>cell 25</td>
<td>cell 26</td>
<td>cell 27</td>
</tr>
<tr align="center" OnmouseOver="javascript:this.className='GridRow10';" OnmouseOut="javascript:this.className='GridRow00';" onClick="javascript:SelectFolder('E:\\ad\\watchfolder',this);" ondblclick="javascript:IntoFolder('E:\\ad\\watchfolder');" title="E:\ad\watchfolder" style="background-color:White;border-color:#99CCFF;cursor:hand;">
<td>cell 21</td>
<td align="left" style="font-weight:normal;font-style:normal;text-decoration:none;"><img id="Grd_folder_ctl10_Img_folder" src="../images/folder1.bmp" style="border-width:0px;" /><span id="Grd_folder_ctl19_Lab_folder">sdfsdfsdfsdfsdfsdfsdfdsfsdfd cell 22</span></td>
<td>cell 23</td>
<td>cell 24</td>
<td>cell 25</td>
<td>cell 26</td>
<td>cell 27</td>
</tr>
</table>
</div>
</td>
</tr >
</table>
<p>
Did you enjoy?
</p>
<p class='note'>
To use it on page you just need to add 'class=resizable' in table tag and
include resizable-tables.js script somewhere.
</p>
<p class='w3c'>
<a target="_blank" href="http://jigsaw.w3.org/css-validator/check/referer" title="W3C Valid CSS!" class="w3c">valid CSS</a>
<a target="_blank" href="http://validator.w3.org/check?uri=referer" title="W3C Valid XHTML!" class="w3c">valid XHTML</a>
</p>
<div class='footnotes'>
<sup>1</sup>it works in Firefox/Mozilla and IE for now.
</div>
<div class='copyright'>© 2006, bz</div>
</div>
</body></html>
- 1
- 2
- 3
- 4
- 5
- 6
前往页