1、新建html文档。
2、书写hmtl代码。<div class="a" ><table id="sample2" width="100%" border="0" cellpadding="0" cellspacing="0"> <tr> <th>标题</th><th>标题</th><th>标题</th><th>标题</th><th>标题</th> </tr> <tr> <td class="left">表格内容</td><td>表格内容</td><td>表格内容</td><td>表格内容</td><td class="right">表格内容</td> </tr> <tr> <td class="left">表格内容</td><td>表格内容</td><td>表格内容</td><td>表格内容</td><td class="right">表格内容</td> </tr> <tr> <td class="left bottom">表格内容</td><td class="bottom">表格内容</td><td class="bottom">表格内容</td><td class="bottom">表格内容</td><td class="bottom right">表格内容</td> </tr> </table> <div class="sampleText"> <label id="sample2Txt">Drag the columns to start</label> </div></div>
3、书写css代码。<style>*{ margin:0; padding:0;}body{font-size:14px; padding:50px;}.a{text-align:left;}.a th{ background-image:url('images/th.png'); height:30px; background-repeat:no-repeat; color:white; text-shadow: #012b4d 2px 2px 2px; text-align: center; }.a td{text-indent:5px; padding:5px;color:#444;border-bottom:1px solid #bbb;border-left:1px solid #bbb;}.a td.left{border-left:1px solid #2e638e;}.a td.right{border-right:1px solid #2e638e;}.a td.bottom{border-bottom:1px solid #2e638e;}.grip{width:20px;height:30px;margin-top:-3px;background-image:url('images/grip.png');margin-left:-5px;position:relative;z-index:88;cursor:e-resize;}.grip:hover{background-position-x:-20px;}.dragging .grip{background-position-x:-40px;}.sampleText{position:relative;width:100%;}.dotted{background-image:url('images/dotted.png');background-repeat:repeat-y;}input.check{}#sample2Txt{float:right;}label{color:#0361ae;}#sample2 th:nth-child(2){color:Red !important;display:none;}#sample2 td:nth-child(2){color:Red !important;display:none;}#sample2 th:nth-child(3){color:Red !important;display:none;}#sample2 td:nth-child(3){color:Red !important;display:none;}</style>
4、书写并添加js代码。<script src="jquery-1.6.2.min.js"></script><script src="js/colResizable-1.5.min.js"></script><script>$(function(){ var onSampleResized = function(e){ var columns = $(e.currentTarget).find("th"); var msg = "columns widths: "; columns.each(function(){ msg += $(this).width() + "px; "; }) $("#sample2Txt").html(msg); }; $("#sample2").colResizable({ liveDrag:true, gripInnerHtml:"<div class='grip'></div>", draggingClass:"dragging", onResize:onSampleResized });}); </script>
5、代码整体结构。
6、查看效果。
