Html Table 固定或自定义列宽度

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <title>Document</title>
  <style>
    td {
      white-space: nowrap;
      overflow: hidden;
      width: 200px;
    }
    table {
      table-layout: fixed;
    }
  </style>
</head>
<body>
  <table bgcolor="green" width="100%">
    <tr bgcolor="white">
        <td>123121212121212121212121212</td>
        <td>123</td>
        <td>123</td>
        <td>123</td>
    </tr>
    <tr bgcolor="white">
        <td>123123123123123123123123123123123123123123123123123123123</td>
        <td>123</td>
        <td>123</td>
        <td>123</td>
    </tr>
    <tr bgcolor="white">
        <td>123</td>
        <td>123</td>
        <td>123</td>
        <td>123</td>
    </tr>
    <tr bgcolor="white">
        <td>345</td>
        <td>345</td>
        <td>345</td>
        <td>345</td>
    </tr>
  </table>
</body>
</html>
  • demo 效果

  • 2
    点赞
  • 6
    收藏
    觉得还不错? 一键收藏
  • 打赏
    打赏
  • 1
    评论
可以通过使用 Bootstrap Table 插件结合一些其他的插件来实现表头固定列宽可拖动改变宽度大小的效果。 首先,你可以使用 Bootstrap Table 自带的 `fixedHeader` 属性来实现表头固定。这个属性可以将表头固定在页面顶部,使其在滚动页面时保持可见。 ```javascript $('#table').bootstrapTable({ fixedHeader: true }); ``` 接下来,你可以使用 `resizable` 插件来实现列宽可拖动改变宽度大小的效果。这个插件可以让用户通过鼠标拖动边缘来改变宽度。 ```javascript $('#table').resizableColumns({ store: window.store }); ``` 其中,`window.store` 是一个用于存储列宽信息的对象。你可以根据需要自定义这个对象。 最后,你需要引入相应的插件文件。具体来说,你需要引入以下文件: - `jquery.resizableColumns.js`:`resizable` 插件文件; - `jquery.resizableColumns.css`:`resizable` 插件样式文件。 这些文件可以从 `resizable` 插件的 GitHub 仓库中下载。 ```html <link rel="stylesheet" href="jquery.resizableColumns.css"> <script src="jquery.resizableColumns.js"></script> ``` 综上所述,下面是一个完整的示例代码: ```html <!DOCTYPE html> <html> <head> <title>Bootstrap Table</title> <link rel="stylesheet" href="https://cdn.bootcdn.net/ajax/libs/twitter-bootstrap/4.5.2/css/bootstrap.min.css"> <link rel="stylesheet" href="jquery.resizableColumns.css"> </head> <body> <table id="table" class="table table-bordered"> <thead> <tr> <th>#</th> <th>First Name</th> <th>Last Name</th> <th>Username</th> </tr> </thead> <tbody> <tr> <td>1</td> <td>Mark</td> <td>Otto</td> <td>@mdo</td> </tr> <tr> <td>2</td> <td>Jacob</td> <td>Thornton</td> <td>@fat</td> </tr> <tr> <td>3</td> <td>Larry</td> <td>the Bird</td> <td>@twitter</td> </tr> </tbody> </table> <script src="https://cdn.bootcdn.net/ajax/libs/jquery/3.5.1/jquery.min.js"></script> <script src="https://cdn.bootcdn.net/ajax/libs/popper.js/1.16.0/umd/popper.min.js"></script> <script src="https://cdn.bootcdn.net/ajax/libs/twitter-bootstrap/4.5.2/js/bootstrap.min.js"></script> <script src="jquery.resizableColumns.js"></script> <script> $('#table').bootstrapTable({ fixedHeader: true }); $('#table').resizableColumns({ store: window.store }); </script> </body> </html> ```
评论 1
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包

打赏作者

卡尔特斯

你的鼓励将是我创作的最大动力

¥1 ¥2 ¥4 ¥6 ¥10 ¥20
扫码支付:¥1
获取中
扫码支付

您的余额不足,请更换扫码支付或充值

打赏作者

实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值