bootstrap设置表格列宽及换行

bootstrap设置表格列宽及换行

  • 业务背景
  • 页面操作
  • 问题处理

业务背景

在日常工作过程中,遇到一个字段长度太长的时候,列表展示整个展示的话效果太差,比如这样的
在这里插入图片描述
列表展示出现了滚动条,查看列表内容时就不太方便;但是业务的要求是不要用字段内容加title的形式,类似这样
在这里插入图片描述
而是需要全部展示,但是不能是滚动条样式的,太麻烦,那么只能是换行展示了。

页面操作

bootstrap支持设置列表宽度,于是设置列表宽度为300px

{field : 'payOrderNo',title : '支付订单号',width: '300px'},

再次测试页面发现页面没有效果,但是宽度已经设置成功了
在这里插入图片描述

问题处理

查阅bootstrap相关属性css设置发现需要在table添加如下属性

style="table-layout:fixed;word-break:break-all;word-wrap:break-word;"

其中:table-layout:fixed; 表示开启表格固定列宽度;
word-break:break-all;word-wrap:break-word; 表示设置表格列自动换行;
整体添加了表格固定列宽属性后的代码
在这里插入图片描述
部署项目后查看页面效果
在这里插入图片描述
到此,bootstrap设置列表宽度并且换行展示的操作就算完成了。

本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如若转载,请注明出处:http://www.mzph.cn/web/47471.shtml

如若内容造成侵权/违法违规/事实不符,请联系多彩编程网进行投诉反馈email:809451989@qq.com,一经查实,立即删除!

相关文章

数学建模--优劣解距离法TOPSIS

目录 简介 TOPSIS法的基本步骤 延伸 优劣解距离法(TOPSIS)的历史发展和应用领域有哪些? 历史发展 应用领域 如何准确计算TOPSIS中的理想解(PIS)和负理想解(NIS)? TOPSIS方法在…

Logstash docker发布

一 下载Logstash 不废话了,我下载的7.17.6 二 新增配置文件 在logstash/pipeline中,添加logstash.conf input {jdbc { # 连接jdbc_connection_string > "jdbc:mysql://192.168.1.1:3306/kintech-cloud-bo?characterEncodingUTF-8&…

汽车电动空调系统

1.电动空调系统概述 电动汽车制冷空调系统与传统汽车制冷空调系统基本原理一样,区别在于电动汽车空调系统采用电动空调压缩机。电动空调压缩机由驱动电机,压缩机,控制器集成。 电动空调压缩机的驱动电机采用体积小,质量轻&#x…

初学者简单了解爬虫的基本认识和操作(详细参考图片)

爬虫 定义:爬虫(Web Crawler 或 Spider)是一种自动访问互联网上网页的程序,其主要目的是索引网页内容,以便搜索引擎能够快速检索到相关信息。以下是爬虫的一些关键特性和功能: 自动化访问:爬虫能…

【学习笔记】无人机系统(UAS)的连接、识别和跟踪(四)-无人机认证与授权

引言 3GPP TS 23.256 技术规范,主要定义了3GPP系统对无人机(UAV)的连接性、身份识别、跟踪及A2X(Aircraft-to-Everything)服务的支持。 3GPP TS 23.256 技术规范: 【免费】3GPPTS23.256技术报告-无人机系…

Python入门基础教程(非常详细)

现在找工作真的越来越难了!今年更是难上加难 前几天在网上刷到这样一条热搜: #23岁找工作因年龄大被HR拒绝了# 是这个世界疯了还是我疯了? 合着只想要有20年以上工作经验的应届毕业生是吧 这好像就是现在的就业市场现状:“35岁…

盘点市场上受欢迎的PDF编辑工具

随着PDF文件使用人数的激增,市面上涌现出了众多功能强大的PDF编辑器工具。但是软件多了我们分辨起来就需要花上不少时间,我推荐一下我用过靠谱的PDF编辑器吧。 1.福昕PDF编辑器 这个软件主要就是针对PDF文稿进行操作的,支持PDF几乎全部的操…

人工智能视频大模型:重塑视频处理与理解的未来

目录 一、人工智能视频大模型概述 1.1 定义与特点 1.2 技术基础 二、关键技术解析 2.1 视频特征提取 2.2 时空建模 2.3 多任务学习 三、应用场景展望 3.1 视频内容分析 3.2 视频编辑与生成 3.3 交互式视频体验 四、未来发展趋势 4.1 模型轻量化与移动端部署 4.2 …

JDBC操作MySQL数据

一准备、 1、首先在IDEA中导入导入包:mysql-connector-java-8.0.23 2、写初始化语句 (1)在目录下找到driver类 (2)在JDBCUtil函数中把驱动器的类路径改掉 ①打开driver类 ②按住类名 Driver用快捷键 CtrlAltshiftC …

记录vivado自带IP iBert眼图近端回环

记录利用vivado自带IP核工具测试信号质量 ibert是测试眼图的工具,在使用的时候并不用改太多的内容,只需要注意参考时钟及所需要的引脚即可。由于条件的限制,并没有使用光纤和电缆进行连接进行外部回环,仅使用内部回环做测试&…

WEB前端08-综合案例(动态表格)

使用 HTML、CSS 和 JavaScript 创建动态表格 在本教程中,我们将创建一个动态表格,允许用户添加行、选择项目,并执行批量操作,如全选或删除选中的行。我们将通过 HTML、CSS 和 JavaScript 来实现这一功能。让我们逐步了解每个部分…

kubernetes集群部署elasticsearch集群,包含无认证和有认证模式

1、背景: 因公司业务需要,需要在测试、生产kubernetes集群中部署elasticsearch集群,因不同环境要求,需要部署不同模式的elasticsearch集群, 1、测试环境因安全性要求不高,是部署一套默认配置; 2…

【程序设计-底层设计-串口通信-底层交互-一些定义-嵌入式学习-自己思考(1)】

【程序设计-底层设计-串口通信-底层交互-一些定义-嵌入式学习-自己思考(1)】 1、概述2、环境说明3、学习部分-底层硬件1、当我们说:底层串口-TX&RT,我们在说什么(1)uart(Universal Asynchro…

数学建模~~~SPSS相关和回归分析

目录 1.双变量相关分析 1.1理论基础 1.2简单散点图的绘制介绍 1.3相关性分析 1.4分析相关性结果 2.简单线性回归分析 2.1简单概括 2.2分析过程 2.3结果分析 3.曲线回归分析 3.1问题介绍 3.2分析过程 3.3结果分析 1.双变量相关分析 1.1理论基础 双变量相关分析并不…

HTML5-canvas1

1、canvas&#xff1a;创建画布 <canvas id"canvas"></canvas>2、画一条直线 var canvasdocument.getElementById(cancas&#xff09;; canvas.width800; canvas.height800; var contextcanvas.getContext(2d); //获得2d绘图上下文环境 //画一条直线 c…

码蹄集部分题目(2024OJ赛7.17-7.21;并查集+最小生成树+线段树+树状数组+DP)

1&#x1f40b;&#x1f40b;供水管线&#xff08;钻石&#xff1b;并查集最小生成树&#xff09; 时间限制&#xff1a;1秒 占用内存&#xff1a;128M &#x1f41f;题目思路 该题目就是最小生成树的问题。我们使用选边的方法&#xff0c;每次选取最小边加入&#xff0c;用…

Kettle 登录示例 POST请求

登录接口是post请求&#xff0c;组装Body为json字符串 var body "{\"username\":\""username"\",\"password\": \""password"\",\"code\":\""verification"\",\"uuid\…

小阿轩yx-高性能内存对象缓存

小阿轩yx-高性能内存对象缓存 案例分析 案例概述 Memcached 是一款开源的高性能分布式内存对象缓存系统用于很多网站提高访问速度&#xff0c;尤其是需要频繁访问数据的大型网站是典型的 C/S 架构&#xff0c;需要构建 Memcached 服务器端与 Memcached API 客户端用 C 语言…

【C++】内存管理的深度解析与实例

C内存管理的深度解析与实例 一、C内存管理的基本概念二、C内存分配方式1. 静态内存分配2. 动态内存分配 三、C内存管理的常见问题及解决策略1. 内存泄漏2. 堆内存碎片化3. 栈溢出 四、C内存管理的最佳实践1. 使用RAII&#xff08;Resource Acquisition Is Initialization&#…

【BUG】已解决:python setup.py bdist_wheel did not run successfully.

已解决&#xff1a;python setup.py bdist_wheel did not run successfully. 目录 已解决&#xff1a;python setup.py bdist_wheel did not run successfully. 【常见模块错误】 解决办法&#xff1a; 欢迎来到英杰社区https://bbs.csdn.net/topics/617804998 欢迎来到我的主…