调整Table表格宽度插件colResizable

女爷i 2022-06-04 06:27 658阅读 0赞

调整Table表格宽度插件colResizable

#

#

引入JS

  1. <script src="js/jquery-1.8.0.min.js" type="text/javascript"></script>
  2. <script src="js/colResizable-1.6.js" type="text/javascript"></script>
  5.    1
  6.    2

TABLE

  1. <table class="table table-bordered">
  2. <thead>
  3.     <tr>
  4.        <th>栏目类型</th>
  5.        <th>活动名称</th>
  6.        <th>状态</th>
  7.        <th>操作选项</th>
  8.     </tr>
  9. </thead>
  10. <tbody>
  11.     <tr>
  12.        <td>青春日记</td>
  13.        <td>我们一起傻逼的日子</td>
  14.        <td>提交</td>
  15.        <td>审核</td>
  16.     </tr>
  17.     <tr>
  18.        <td>我和孩子的成长故事</td>
  19.        <td>成长故事</td>
  20.        <td>通过</td>
  21.        <td>审核</td>
  22.     </tr>
  23. </tbody>
  24. </table>
  27.    1
  28.    2
  29.    3
  30.    4
  31.    5
  32.    6
  33.    7
  34.    8
  35.    9
  36.    10
  37.    11
  38.    12
  39.    13
  40.    14
  41.    15
  42.    16
  43.    17
  44.    18
  45.    19
  46.    20
  47.    21
  48.    22
  49.    23
  50.    24

JS

  1. <script type="text/javascript">
  2.     $(function() { 
  3.         $("table").colResizable();
  4.     })
  5. </script>
  8.    1
  9.    2
  10.    3
  11.    4
  12.    5

以上步骤即可实现最简单的鼠标拖动调整表格列宽

在线演示：colresizable

colResizable 官方文档：http://www.bacubacu.com/colresizable/

原文地址： http://blog.csdn.net/itmyhome1990/article/details/51322740

发表评论

表情：
评论列表 （有 0 条评论，658人围观）

还没有评论，来说两句吧...

相关阅读