python prettytable表格列数太多_html table表格列数太多添加横向滚动条

最新推荐文章于 2023-10-15 21:56:34 发布

weixin_39625975

最新推荐文章于 2023-10-15 21:56:34 发布

阅读量416

点赞数 1

文章标签： python prettytable表格列数太多

本文链接：https://blog.csdn.net/weixin_39625975/article/details/111459432

版权

当Python Prettytable或HTML表格列数过多，内容挤压时，可以通过为HTML table添加外部div并设置样式实现横向滚动条。具体做法是设置div的width、height和overflow属性。对于移动端，可以使用flex布局和overflow属性来实现滚动效果。

摘要由CSDN通过智能技术生成

HTML的table表格的列数如果太多或者某一列的内容太长，就会导致表格td的内容被挤压变形，对后台的使用体验非常不友好。比如下面的情况：

那么如何在表格列数较多的情况下添加横向滚动条？其实很简单，只需要给table外面包一层div，设置width、height 和最重要的 overflow:scroll。完整代码如下：

ID	标题	简介	作者	库存	价格	销量	备注	阅读数	点赞数	收藏数	评论数	发布时间	修改时间
1	这是一篇标题很长的文章用来测试表格的测试标题	这是一篇标题很长的文章用来测试表格不被太多列挤得变形的描述...	管理员	3000	120.68	1200	测试啊测试test	123	20	17	5	2018-03-06 12:00:00	2018-03-07 15:00:00
1	这是一篇标题很长的文章用来测试表格的测试标题	这是一篇标题很长的文章用来测试表格不被太多列挤得变形的描述...	管理员	3000	120.68	1200	测试啊测试test	123	20	17	5	2018-03-06 12:00:00	2018-03-07 15:00:00

运行后的效果如下：

移动端添加横向滚动条&amp&semi;隐藏

添加横向滚动条ul { display: flex; overflow-x: auto; overflow-y: hidden; white-space: nowrap; }隐藏滚动条,保留滚动效果 ...

[转]bootstrap table 动态列数