调整Table表格宽度插件colResizable

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

### 调整Table表格宽度插件colResizable    ###

###     ###

###  ###

#### 引入JS ####

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

#### TABLE ####

<table class="table table-bordered">
    <thead>
        <tr>
           <th>栏目类型</th>
           <th>活动名称</th>
           <th>状态</th>
           <th>操作选项</th>
        </tr>
    </thead>
    <tbody>
        <tr>
           <td>青春日记</td>
           <td>我们一起傻逼的日子</td>
           <td>提交</td>
           <td>审核</td>
        </tr>
        <tr>
           <td>我和孩子的成长故事</td>
           <td>成长故事</td>
           <td>通过</td>
           <td>审核</td>
        </tr>
    </tbody>
    </table>
     
      
       1
       2
       3
       4
       5
       6
       7
       8
       9
       10
       11
       12
       13
       14
       15
       16
       17
       18
       19
       20
       21
       22
       23
       24

#### JS ####

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

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

在线演示：[colresizable][]

colResizable 官方文档：[http://www.bacubacu.com/colresizable/][http_www.bacubacu.com_colresizable]

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

[colresizable]: http://blog.itmyhome.com/colresizable/
[http_www.bacubacu.com_colresizable]: http://www.bacubacu.com/colresizable/

发表评论取消回复

表情：

评论列表（有 0 条评论，528人围观）

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

相关阅读

相关 html表格宽度拖拽,拖动改变Table的列宽度

.resizeDivClass \{ position:relative; background-color:red; width:2; z-index:1; le

深藏阁楼爱情的钟/ 2022年10月10日 15:45/ 0 赞/ 562 阅读

相关 jQuery可编辑的table表格插件

[下载地址][Link 1]jQuery表格编辑添加删除行插件，table表格插件，默认设置json数据动态生成表格。 ![1630270285.png][] dd:

不念不忘少年蓝@/ 2022年09月09日 06:14/ 0 赞/ 231 阅读

相关 Bootstrap实现的Table表格导出Excel插件

[下载地址][Link 1]使用Bootstrap实现的Table表格导出Excel插件，默认设置表格数据，支持表格文字内容和表头项目搜索，一键导出表格excel文件操作功能。

深碍√TFBOYSˉ_/ 2022年09月09日 06:14/ 0 赞/ 251 阅读

相关 jQuery可调整表和列宽插件-colResizable

最基本的例子引入JS <script src="js/jquery-1.8.0.min.js" type="text/javascript"></scri

爱被打了一巴掌/ 2022年08月21日 14:46/ 0 赞/ 207 阅读

相关基于jquery的Table表格排序插件

之前在公司做的项目里面用到了一个用js对table进行排序的小功能，考虑到项目本身使用了jquery框架，并且这个功能比较通用，于是利用jquery机制做成了个简单的插件，这样

左手的ㄟ右手/ 2022年08月06日 15:16/ 0 赞/ 253 阅读

相关调整Table表格宽度插件colResizable

调整Table表格宽度插件colResizable 引入JS <script src="js/jquery-1.8.0.min.

女爷i/ 2022年06月04日 06:27/ 0 赞/ 529 阅读

相关 Bootstrap表格插件--bootstrap-table

一、简介 bootstrap-table是基于 Bootstrap 的 jQuery 表格插件，通过简单的设置，就可以拥有强大的单选、多选、排序、分页，以及编辑、导

╰半橙微兮°/ 2022年06月04日 05:06/ 0 赞/ 408 阅读

相关 Bootstrap之表格插件Bootstrap-table

一.前言在Web开发中，可以采用很多功能强大的插件来满足要求，且能极大的提高开发效率，本文介绍bootstrap-table是一款非常有名的开源表格插件，在很多项目中广

桃扇骨/ 2022年04月23日 06:42/ 1 赞/ 605 阅读

相关 Markown 表格之调整宽度技巧

> `<table>` 中表格的宽度由标题的 `<th>` 决定，我们只需要利用上 CSS 操作一番即可达到目的。说一下，很多网友说没用，这个不是我能决定的，关键看

我会带着你远行/ 2021年09月11日 06:24/ 0 赞/ 1435 阅读

相关表格Table宽度设置无效的解决方法

bootstrap中使用table时发现不管用width赋值方式都无法改变table>td的宽度解决方法：设置table：table-layout:fixed

朱雀/ 2020年06月25日 09:16/ 0 赞/ 1474 阅读