我现在只想用flexigrid的可拖动列宽这个效果,能作用在已有的表格上吗

解决方案 »

  1.   


    <!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
    <html>
    <head>
    <meta http-equiv="Content-Type" content="text/html; charset=UTF-8"><link rel="stylesheet" type="text/css" href="style.css">
    <link rel="stylesheet" type="text/css" href="css/flexigrid/flexigrid.css">
    <script type="text/javascript" src="lib/jquery/jquery.js"></script>
    <script type="text/javascript" src="flexigrid.js"></script>
    <title>Insert title here</title><script type="text/javascript">
    $(document).ready(function(){
    $('.flexme1').flexigrid({resizable:true});
    });
    </script>
    </head>
    <body>
    <table class="flexme1">
    <thead>
         <tr>
                 <th width="100">Col 1</th>
                 <th width="100">Col 2</th>
                 <th width="100">Col 3 is a long header name</th>
                 <th width="300">Col 4</th>
                </tr>
        </thead>
        <tbody>
         <tr>
                 <td>1</td>
                 <td>2</td>
                 <td>3</td>
                 <td>4</td>
                </tr>
         <tr>
                 <td>2</td>
                 <td>This is data 2</td>
                 <td>This is data 3</td>
                 <td>This is data 4</td>
                </tr>
         <tr>
                 <td>3</td>
                 <td>This is data 2</td>
                 <td>This is data 3</td>
                 <td>This is data 4</td>
                </tr>
         <tr>
                 <td>4</td>
                 <td>This is data 2</td>
                 <td>This is data 3</td>
                 <td>This is data 4</td>
                </tr>
         <tr>
                 <td>5</td>
                 <td>This is data 2</td>
                 <td>This is data 3</td>
                 <td>This is data 4</td>
                </tr>
         <tr>
                 <td>6</td>
                 <td>This is data 23</td>
                 <td>This is data f</td>
                 <td>This is data 254</td>
                </tr>
         <tr>
                 <td>7</td>
                 <td>This is data 2</td>
                 <td>This is data 3</td>
                 <td>This is data 4</td>
                </tr>
         <tr>
                 <td>7</td>
                 <td>This is data 2</td>
                 <td>This is data 3</td>
                 <td>This is data 4</td>
                </tr>
         <tr>
                 <td>8</td>
                 <td>This is data 2</td>
                 <td>This is data 3</td>
                 <td>This is data 4</td>
                </tr>
         <tr>
                 <td>9</td>
                 <td>This is data 2</td>
                 <td>This is data 3</td>
                 <td>This is data 4</td>
                </tr>
         <tr>
                 <td>2</td>
                 <td>This is data 2</td>
                 <td>This is data 3</td>
                 <td>This is data 4</td>
                </tr>
         <tr>
                 <td>23</td>
                 <td>This is data 2</td>
                 <td>This is data 3</td>
                 <td>This is data 4</td>
                </tr>
                
        </tbody>
    </table></body>
    </html>
    这个就可以了!你试试。。