使用bootstrapTable组件,达到表头中有一格显示两行,其他表头均为一行,效果图如下:

代码:

  1. {
  2. field : 'pay_date',
  3. title : '已还款完成时间',
  4. valign:'middle',
  5. align:'center'
  6. },{
  7. field : 'check_status',
  8. title : '打款复核</br>(未复核/未通过/全部)',
  9. align:'center'
  10. },

其中关键是"

  1. 打款复核</br>(未复核/未通过/全部)

"     </br>可以被直接识别而达到换行效果

其他行表头添加"

  1. valign:'middle',

"使得他们位于单元格中间,达到图中效果

bootstrapTable表格表头换行的更多相关文章

  1. Bootstrap-table表格插件的使用方法

    前言 上次写了一个可拖动列表的插件,但除了这个特点没什么优点了,接下写的是我们常用的Bootstrap-table表格插件 正文 官网:https://bootstrap-table.com/ 有两个 ...

  2. table表格在设置文字垂直居中后,在表格显示相同排列的数据(比如:testtesttesttsttesttesstestse很多的test)时此表格不能换行

    table设置了垂直居中后在表格显示相同排列的数据(比如:testtesttesttsttesttesstestse很多的test)时此表格不能换行, 此时会导致table会把页面撑的很宽,导致表格后 ...

  3. css固定表格表头(各浏览器通用)

    <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/ ...

  4. 结合bootstrap fileinput插件和Bootstrap-table表格插件,实现文件上传、预览、提交的导入Excel数据操作流程

    1.bootstrap-fileinpu的简单介绍 在前面的随笔,我介绍了Bootstrap-table表格插件的具体项目应用过程,本篇随笔介绍另外一个Bootstrap FieInput插件的使用, ...

  5. bootstrap-table表格插件的使用案例

    近期刚刚结束一个项目,总结一下之前做的一个后台管理系统中用到的bootstrap-table表格插件,下面是我做的一个案例(展示主要代码部分): //请求服务数据时所传参数 function quer ...

  6. 在Bootstrap开发框架中使用bootstrapTable表格插件和jstree树形列表插件时候,对树列表条件和查询条件的处理

    在我Boostrap框架中,很多地方需要使用bootstrapTable表格插件和jstree树形列表插件来共同构建一个比较常见的查询界面,bootstrapTable表格插件主要用来实现数据的分页和 ...

  7. markdown如何在表格内换行?

    答:使用<br>即可在表格内换行

  8. element-ui 表格标题换行

     render-header: 列标题 Label 区域渲染使用的 Function <template> <el-table :data="dataList"& ...

  9. 解决element-ui表格表头内容太长时的换行问题

    在用vue+element-ui做一个后台管理系统时,遇到这样的问题, 如图: 使用el-table做一个表格,当表头内容过长时会换行,在不设置的宽度的时候每一列的宽度是等比例分配的,虽然elemen ...

随机推荐

  1. google风格

    复制一下代码即可: <?xml version="1.0" encoding="UTF-8" standalone="no"?> ...

  2. webservice 注解介绍

    JAX-WS 注释 “基于 XML 的 Web Service 的 Java API”(JAX-WS)通过使用注释来指定与 Web Service 实现相关联的元数据以及简化 Web Service ...

  3. 案例44-crm练习新增客户使用struts2

    1 src下配置文件 1 struts.xml <?xml version="1.0" encoding="UTF-8"?> <!DOCTYP ...

  4. mysql安装 2018最新安装mysql教程及遇到的问题解决Windows下

    原文作者:aircraft 原文地址:https://www.cnblogs.com/DOMLX/p/8094659.html 今天因为换了个LINUX系统 把我的E盘不小心给卸载了 结果还是不能用 ...

  5. 飞檐走壁navMesh

    http://www.manew.com/thread-106030-1-1.html

  6. 深入redis内部之redis启动过程之二

    接上文,继续分析代码 1. 设置线程安全模式 zmalloc_enable_thread_safeness();/*设置线程安全标识符为1*/ void zmalloc_enable_thread_s ...

  7. CTSC/APIO2018 游记

    狗牌滚粗选手,此博客证明我去过...... CTSC 消失的源代码与消失的分数...... 我也不知道发生了什么....... APIO 旁边两位小哥太强了,心态完全炸裂,最后也滚粗了...... 回 ...

  8. 深入理解JavaScript系列(28):设计模式之工厂模式

    介绍 与创建型模式类似,工厂模式创建对象(视为工厂里的产品)时无需指定创建对象的具体类. 工厂模式定义一个用于创建对象的接口,这个接口由子类决定实例化哪一个类.该模式使一个类的实例化延迟到了子类.而子 ...

  9. [转] 微信小程序 页面跳转 传递参数

    本文转自:http://blog.csdn.net/qq_31383345/article/details/52795212 微信小程序的页面跳转,页面之间传递参数笔记. CSDN微信小程序开发专栏, ...

  10. 11、幻灯片:Slides

    /* ---ts----*/ import { Page,Slides } from 'ionic-angular'; import { ViewChild } from '@angular/core ...