《前端》bootstrapTable表头调整列宽-colResizable

最新推荐文章于 2022-02-21 13:59:39 发布

原创

最新推荐文章于 2022-02-21 13:59:39 发布 · 1.6k 阅读

收录于

本文介绍如何在Bootstrap Table中实现列宽的动态调整。通过引入colResizable插件，用户可以自由调整表格列宽，提升前端交互体验。需要的文件包括bootstrap的基本样式和脚本，以及colResizable.js。

需要引入的文件：

bootstrapTable基本引入文件：

bootstrap-3.3.4.css、bootstrap-table.min.css、jquery-3.5.1.min.js、bootstrap-3.3.7.min.js、bootstrap-table.min.js

表头调整列宽需要再引入：

colResizable-1.6.js

代码：

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>bootstrapTable表头调整列宽</title>
    <link rel="stylesheet" href="https://blog.csdn.net/lib/css/bootstrap-3.3.4.css">
    <link rel="stylesheet" href="https://blog.csdn.net/lib/css/bootstrap-table.min.css">
    <script src="https://blog.csdn.net/js/jquery-3.5.1.min.js"></script>
    <script src="https://blog.csdn.net/lib/js/bootstrap-3.3.7.min.js"></script>
    <script src="https://blog.csdn.net/lib/js/bootstrap-table.min.js"></script>
    <script src="https://blog.csdn.net/lib/js/colResizable-1.6.js"></script>
</head>

<body>
    <table i