table单元格内容过多换行显示
<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单元格内容过多换行显示的更多相关文章
- Vue. 之 Element table 单元格内容隐藏
Vue. 之 Element table 单元格内容隐藏 在table显示数据时,若某个单元格的内容过多,需要进行隐层,在这一列的单元格属性添加::show-overflow-tooltip=&quo ...
- html 让table表格中的td单元格内容过长显示为固定长度,多余部分用省略号代替?
<th class="wrap">商品名</th> .wrap{ width: 150px; //设置需要固定的宽度 white-space: nowrap ...
- LaTex表格内单元格内容强制换行
/newcommand{/tabincell}[2]{/begin{tabular}{@{}#1@{}}#2/end{tabular}}%放在导言区 %然后使用&/tabincell{c}{} ...
- LaTex: 表格单元格内容 分行显示/换行
问题:如何同时让表格同一行一个单元格的文字能垂直居中?比如说文字超长超出页面范围需要分行显示 答:(来源于smth) 方案一: \newcommand{\tabincell}[2]{\begin{ta ...
- Easyui datagrid 设置内容超过单元格宽度时自动换行显示
datagrid 设置内容超过单元格宽度时自动换行显示 by:授客 QQ:1033553122 测试环境 jquery-easyui-1.5.3 问题描述 单元格内容超过单元格宽度不会自动化换行.如下 ...
- EasyUI Datagrid 鼠标悬停显示单元格内容 复制代码
EasyUI Datagrid 鼠标悬停显示单元格内容 ,halign:, align: 0 « 上一篇:LINQ to Entities 中的查询» 下一篇:去掉字符串中的非数字字符 posted ...
- EasyUI的Datagrid鼠标悬停显示单元格内容
功能描述:table鼠标悬停显示单元格内容 1.js函数 function hoveringShow(value) { return "<span title='" + va ...
- js如何实现动态显示表格数据(点奇数显示奇数单元格内容)
js如何实现动态显示表格数据(点奇数显示奇数单元格内容) 一.总结 一句话总结: 1.动态指定表格中每个单元格的id,然后通过id可以获取每个单元格,然后对里面的innerHTML进行赋值. 2.弄了 ...
- C# DataGridView在单元格提示里(ToolTip)显示完整的单元格内容
当单元格内容太多时,则会忽略后面的内容 解决方案: 添加Dgv鼠标移到单元格事件时,设置当前单元格的ToolTipText属性内容为当前单元格内容 void From_Load(object send ...
随机推荐
- 【BZOJ1833】[ZJOI2010] count 数字计数(数位DP)
点此看题面 大致题意: 求在给定的两个正整数\(a\)和\(b\)中的所有整数中,\(0\sim9\)各出现了多少次. 数位\(DP\) 很显然,这是一道数位\(DP\)题. 我们可以用前缀和的思想, ...
- 【HDU1542】Atlantis (扫描线的经典运用)
点此看题面 大致题意: 给你\(N\)个矩形,请你求出它们覆盖的面积(重叠的面积只算一次). 扫描线 这道题是一道典型的求矩形面积并问题,是扫描线的一个经典运用.这里就不赘述了. 代码 #includ ...
- Gym - 100676H Capital City(边强连通分量 + 树的直径)
H. Capital City[ Color: Black ]Bahosain has become the president of Byteland, he is doing his best t ...
- 123apps-免费网络应用
前言 在Jianrry`s博客看见推荐这个网址,试用了一下感觉还不错.主要是完全免费!!就当备用吧 网站介绍 123apps 网站地址:https://123apps.com/cn/ 旗下网站: PD ...
- 一次线上CPU高的问题排查实践
一次线上CPU高的问题排查实践 前言 近期某一天上班一开电脑,就收到了运维警报,有两台服务CPU负载很高,同时收到一线同事反馈 系统访问速度非常慢,几乎无响应. 一个美好的早晨,最怕什么就来什么.只好 ...
- 一次磁盘IO过高分析过程
1.查看监控,发现整点时间有写IO过高情况
- 工具之UltraEdit之正则表达式
- Linux 下上传下载命令,SCP,SFTP,FTP
scp 帮助命令: man scp scp功能: 下载远程文件或者目录到本地, 如果想上传或者想下载目录,最好的办法是采用tar压缩一下,是最明智的选择. 从远程主机 下载东西到 本地电脑 拷贝文件命 ...
- Linux ps与top命令
Linux ps与top命令 这两个命令都是查看系统进程信息的命令,但是用处有点儿不同 1.ps命令--提供系统过去信息的一次性快照 也就是说ps命令能够查看刚刚系统的进程信息 命令:ps aux或 ...
- DevOps - 日志分析 -ELK
wget --no-check-certificate --no-cookies --header "Cookie: oraclelicense=accept-securebackup-co ...