<table class="am-table am-table-striped am-table-hover table-main am-table-compact " style="table-layout: fixed;">

<thead>

<tr>

<th class="table-check"><input type="checkbox" id="checkall"/></th>

<th class="table-author am-show-sm-only">节目名称</th>

<th class="table-author am-show-sm-only"style="width:120px;">所属电视台</th>

<th class="table-author am-hide-sm-only" style="width:50px;">版本</th>

<th class="table-author am-hide-sm-only">开始时间</th>

<th class="table-author am-hide-sm-only">结束时间</th>

<th class="table-date am-hide-sm-only">获取时间</th>

<th class="table-set" style="width:140px;">操作</th>

</tr>

</thead>

<tbody>

[#if list][#list list.items as t]

<tr>

<td><input type="checkbox" class="checkone"/><input type="hidden" value="${t._id}"></td>

<td style="overflow: hidden;white-space: nowrap;text-overflow: ellipsis;" class="logcontent" >${t.program}</td>

<td >${t.channelName}</td>

<td >${t.__v}</td>

<td style="overflow: hidden;white-space: nowrap;text-overflow: ellipsis;" class="logcontent">${t.beginTime?string("yyyy年MM月dd日HH时mm分ss秒")}</td>

<td style="overflow: hidden;white-space: nowrap;text-overflow: ellipsis;" class="logcontent">${t.endTime?string("yyyy年MM月dd日HH时mm分ss秒")}</td>

<td style="overflow: hidden;white-space: nowrap;text-overflow: ellipsis;" class="logcontent">${t.addTime?string("yyyy年MM月dd日HH时mm分ss秒")}</td>

<td>

<div class="am-btn-toolbar">

<div class="am-btn-group am-btn-group-xs">

<button class="am-btn am-btn-default am-btn-xs am-text-secondary"  onclick="location='/TVPrograms/addOne.do?_id=${t._id}&userName=${datamanager.username}&forwardUrl=${forwardUrl}'" ><span class="am-icon-pencil-square-o"></span> 编辑</button>

<button class="am-btn am-btn-default am-btn-xs am-text-danger am-hide-sm-only"   onclick="check('${t._id}','${datamanager.username}')"><span class="am-icon-trash-o"></span> 删除</button>

</div>

</div>

</td>

</tr>

[/#list]

[/#if]

</tbody>

</table>

js代码:

//logcontent内容过长

$(".logcontent").each(function(){

$(this).click(function(){

var a = $(this).css("white-space");

if(a=="nowrap"){

$(this).css("white-space","normal");

}else{

$(this).css("white-space","nowrap");

}

})

})

style="table-layout: fixed;":设置表格大小固定 (列宽由表格宽度和列宽度设定)。

style="overflow: hidden;white-space: nowrap;text-overflow: ellipsis;"

   overflow:溢出内容会被修剪,并且其余内容是不可见的。

   white-space:规定段落中的文本不进行换行

   text-overflow:显示省略符号来代表被修剪的文本。

table单元格内容过多换行显示的更多相关文章

  1. Vue. 之 Element table 单元格内容隐藏

    Vue. 之 Element table 单元格内容隐藏 在table显示数据时,若某个单元格的内容过多,需要进行隐层,在这一列的单元格属性添加::show-overflow-tooltip=&quo ...

  2. html 让table表格中的td单元格内容过长显示为固定长度,多余部分用省略号代替?

    <th class="wrap">商品名</th> .wrap{ width: 150px; //设置需要固定的宽度 white-space: nowrap ...

  3. LaTex表格内单元格内容强制换行

    /newcommand{/tabincell}[2]{/begin{tabular}{@{}#1@{}}#2/end{tabular}}%放在导言区 %然后使用&/tabincell{c}{} ...

  4. LaTex: 表格单元格内容 分行显示/换行

    问题:如何同时让表格同一行一个单元格的文字能垂直居中?比如说文字超长超出页面范围需要分行显示 答:(来源于smth) 方案一: \newcommand{\tabincell}[2]{\begin{ta ...

  5. Easyui datagrid 设置内容超过单元格宽度时自动换行显示

    datagrid 设置内容超过单元格宽度时自动换行显示 by:授客 QQ:1033553122 测试环境 jquery-easyui-1.5.3 问题描述 单元格内容超过单元格宽度不会自动化换行.如下 ...

  6. EasyUI Datagrid 鼠标悬停显示单元格内容 复制代码

    EasyUI Datagrid 鼠标悬停显示单元格内容 ,halign:, align: 0 « 上一篇:LINQ to Entities 中的查询» 下一篇:去掉字符串中的非数字字符 posted ...

  7. EasyUI的Datagrid鼠标悬停显示单元格内容

    功能描述:table鼠标悬停显示单元格内容 1.js函数 function hoveringShow(value) { return "<span title='" + va ...

  8. js如何实现动态显示表格数据(点奇数显示奇数单元格内容)

    js如何实现动态显示表格数据(点奇数显示奇数单元格内容) 一.总结 一句话总结: 1.动态指定表格中每个单元格的id,然后通过id可以获取每个单元格,然后对里面的innerHTML进行赋值. 2.弄了 ...

  9. C# DataGridView在单元格提示里(ToolTip)显示完整的单元格内容

    当单元格内容太多时,则会忽略后面的内容 解决方案: 添加Dgv鼠标移到单元格事件时,设置当前单元格的ToolTipText属性内容为当前单元格内容 void From_Load(object send ...

随机推荐

  1. SRM 670 div2 A B C div1 A(贪心,子问题合并)

    A Cdgame brute force... B Drbalance 贪心,每次选最前面的-变成+,相当于后面所有的负值+2. C Treestrat 考虑集中去抓一个Red Token,以这个To ...

  2. 仅用移动开发服务:开发native应用

    不花一分钱,就可以做native应用开发,这在以前是根本不敢想象的事儿.然而在今天,移动开发工具和服务已经五花八门,聪明的开发者只要随心所欲的抓取几个顺手的,就能完成native开发.今天给大家介绍的 ...

  3. 第十四篇、OC_新闻查看器

    PageTitleView: #import <UIKit/UIKit.h> @class GFBPageTitleView; @protocol GFBPageTitleViewDele ...

  4. MongoDB+nodejs查询并返回数据

    const express = require('express');const router = express.Router(); const Monk = require('monk');con ...

  5. 基础篇(2):c++顺序结构程序设计

    一个程序最基本的结构莫过于3种:顺序,选择,循环.这篇讲讲顺序结构. c++语言的运算符与表达式数量之多,在高级语言中是少见的,也使得它的语言功能十分完善. c++的运算符有单目与双目之分(作用于一个 ...

  6. mysql 索引的统计

    查看一个库里面没有使用过的索引select object_type,object_schema,object_name,index_name,count_star,count_read,COUNT_F ...

  7. java util - 中文、繁体转成拼音工具pinyin4j

    需要 pinyin4j-2.5.0.jar 包 代码例子 package cn.java.pinyin4j; import net.sourceforge.pinyin4j.PinyinHelper; ...

  8. Python学习笔记(六)测试开发之接口开发

    Python的接口开发要使用到flask.Flask(__name__) 下面是一个简单的接口实例程序及访问效果: import flaskserver = flask.Flask(__name__) ...

  9. 牛客第四次多校Maximum Mode

    链接:https://www.nowcoder.com/acm/contest/142/G来源:牛客网 题目描述 The mode of an integer sequence is the valu ...

  10. 非负矩阵分解(NMF)原理及算法实现

    一.矩阵分解回想 矩阵分解是指将一个矩阵分解成两个或者多个矩阵的乘积.对于上述的用户-商品(评分矩阵),记为能够将其分解为两个或者多个矩阵的乘积,如果分解成两个矩阵和 .我们要使得矩阵和 的乘积能够还 ...