关于table里的数据太长超出列宽时,不换行,出省略号,鼠标移上去以后显示全部数据

#t1{
 table-layout:fixed;
}
#t1 td{
text-overflow:ellipsis;
overflow:hidden;
white-space: nowrap;
}

上面是css

 1 <table width="670" align="center" border="0" cellpadding="0" cellspacing="0" class="tyouhyou_11pt" id="t1">
 2             <tr height="30" class="tyouhyou_8pt" bgcolor="LightCyan">
 3                 <td align="center" width="120" bgcolor="#BBFFFF" style="border: 1px solid black;">顧客名</td>
 4                 <td align="center" width="70" bgcolor="#BBFFFF" style="border: 1px solid black;border-left: 0px;">対象年月</td>
 5                 <td align="center" width="80" bgcolor="#BBFFFF" style="border: 1px solid black;border-left: 0px;">派遣社員名カナ</td>
 6                 <td align="center" width="60" bgcolor="#BBFFFF" style="border: 1px solid black;border-left: 0px;">スタッフCD</td>
 7                 <td align="center" width="100" bgcolor="#BBFFFF" style="border: 1px solid black;border-left: 0px;">発行依頼日時</td>
 8                 <td align="center" width="100" bgcolor="#BBFFFF" style="border: 1px solid black;border-left: 0px;">発行日時</td>
 9
10                 <td align="center" width="120" bgcolor="#BBFFFF" style="border: 1px solid black;border-left: 0px;">送付先メールアドレス</td>
11
12                 <td align="center" width="20" bgcolor="#BBFFFF" style="border: 1px solid black;border-left: 0px;">&nbsp;</td>
13             </tr>
14
15             <s:iterator id="hakenkeiyakuConfirmVo.dataList" value="hakenkeiyakuConfirmVo.dataList">
16             <tr height="30" class="tyouhyou_8pt" >
17                 <td align="left" width="140" style="border-left: 1px solid black;border-bottom: 1px solid black;
18                 border-right: 1px solid black;" title="<s:property value="confirm_ko_name" />">
19                     &nbsp;<s:property value="confirm_ko_name" />
20                 </td>
21                 <td align="center" width="70" style="border-left: 0px;border-bottom: 1px solid black;
22                 border-right: 1px solid black;">
23                     &nbsp;<s:property value="confirm_year_month" />
24                 </td>
25                 <td align="center" width="80" style="border-left: 0px;border-bottom: 1px solid black;
26                 border-right: 1px solid black;">
27                     &nbsp;<s:property value="confirm_staff_name"/>
28                 </td>
29                 <td align="center" width="60" style="border-left: 0px;border-bottom: 1px solid black;
30                 border-right: 1px solid black;">
31                     &nbsp;<s:property value="confirm_staff_cd"/>
32                 </td>
33                 <td align="center" width="100" style="border-left: 0px;border-bottom: 1px solid black;
34                 border-right: 1px solid black;">
35                     &nbsp;<s:property value="confirm_order_time"/>
36                 </td>
37                 <td align="center" width="100" style="border-left: 0px;border-bottom: 1px solid black;
38                 border-right: 1px solid black;">
39                     &nbsp;<s:property value="confirm_semd_time"/>
40                 </td>
41
42                 <td align="center" width="120" style="border-left: 0px;border-bottom: 1px solid black;
43                 border-right: 1px solid black;" title="<s:property value="confirm_sendMailAddr"/>">
44                     &nbsp;<s:property value="confirm_sendMailAddr"/>
45                 </td>
46
47                 <td align="center" width="20" style="border-left: 0px;border-bottom: 1px solid black;
48                 border-right: 1px solid black;">
49                 <s:checkbox name="hakenSakiKanri.selectedStaff" id="hakenSakiKanri.selectedStaff" onclick="checkedYesOrNo();">
50                 </s:checkbox>
51                 <input type="hidden" name="selectedStaff" id="selectedStaff" value="<s:property value="confirm_staff_cd"/>"/>
52                 <input type="hidden" name="selectedKoCds" id="selectedKoCds" value="<s:property value="confirm_ko_cd"/>"/>
53                 <input type="hidden" name="selectedYearMonths" id="selectedYms" value="<s:property value="confirm_year_month1"/>"/>
54                 <input type="hidden" name="selectedOrderTimes" id="selectedOts" value="<s:property value="confirm_order_time"/>"/>
55                 </td>
56             </tr>
57         </s:iterator>
58         </table>

上面红色标记的就是鼠标移上去出现全部数据的那一列,只是多一个title属性

所以综上所述,只需要css和代码中红色标记的就可以实现了

时间: 2024-10-27 19:30:46

关于table里的数据太长超出列宽时,不换行,出省略号,鼠标移上去以后显示全部数据的相关文章

table中数据太长部分显示

<style type="text/css"> .etc{white-space:nowrap;text-overflow:ellipsis;overflow:hidden;width:200px;} </style> <table> <tr> <td><div class="etc" title="数据太长了怎么办,...部分显示">数据太长了怎么办,...部分显示<

C# JavaScriptSerializer报错,json数据太长

ASP.NET平台中,用JavaScriptSerializer将返回的数据序列化,若返回的数据非常大,则可能会报如下错误: Exception information: Exception type: InvalidOperationException Exception message: Error during serialization or deserialization using the JSON JavaScriptSerializer. The length of the st

#.NET# DataGrid显示大量数据——DataGridView虚模式

要解决的目标:如何让 Datagridview 快速平滑显示大量数据 通常,Winform 下的表格控件是很"低效"的,如 DataGrid 和 DataGridView.造成低效的原因在于在默认的设定下,它们都诚实的和数据源做了"真绑定",这种绑定无论你使用了那种方式对数据源进行载入和管理,表格控件都会和全部的数据一一进行认识,并根据它们的数量和类型,逐个创建行和单元格.--也就是说,数据源有1万个单元格,表格控件默认就会对这1万个数据进行认识和创建并显示出来,怎

Oracle批量插入数据SQL语句太长出错:无效的主机/绑定变量名

Oracle数据库,用mybatic批量插入数据: <insert id="saveBatch" parameterType="io.renren.entity.NodeDataEntity" databaseId="oracle"> insert into "NODE_DATA" ( "NODE_ID", "DATA_TIME", "DATA_VALUE"

Oracle通过PL/SQL Developer导出数据为CSV格式,VARCHAR2类型的字段如果存入的是数值(例如3307830000004059)太长,最后一位会被置为0

问题描述: Oracle通过PL/SQL Developer导出数据为CSV格式,VARCHAR2类型的字段如果存入的是数值(例如3307830000004059)太长,CSV文件该列会用科学计数法表示,即使选择该列,点击数据--.>分列,固定宽度,列数据格式选择文本,最后一位仍然会被置为0. 解决方法: Oracle通过PL/SQL Developer导出数据为CSV格式,新建一个Excel文件,点击数据-->自文本,选择之前导出的CSV文件,文件类型分隔符号,选择逗号,[选中所有列],然后

Qt的Model/View Framework解析(数据是从真正的“肉(raw)”里取得,Model提供肉,所以读写文件、操作数据库、网络通讯等一系列与数据打交道的工作就在model中做了)

最近在看Qt的Model/View Framework,在网上搜了搜,好像中文的除了几篇翻译没有什么有价值的文章.E文的除了Qt的官方介绍,其它文章也很少.看到一个老外在blog中写道Model/View是他认为Qt中最不好的一部分了.真的是这样吗?为了回馈开源社区,我写了这篇blog,写的是我认为比较有价值的东东.题目起得是解析,但也没有特别细节的介绍,点到为止,有兴趣的Tx可以继续讨论.我所看的资料有<C++ GUI Programming with Qt 4, Second Edition

成功也不需要太长的时间

有两个年轻人都很喜欢画画,一个年轻人很有绘画天赋,家境也很富裕,而另外的一个年轻人则资质差一些,家庭贫困.在二十多岁的时候两个入都默默无闻,很有天赋的年轻人开始不耐烦了,开始抱怨成功遥遥无期. 另一个年轻人则因为生活所迫不得不去跟人学做木匠,可是他对绘画的热爱从来没有减弱,每天无论回来得多晚.多累,他都要点亮油灯,伏案画一个小时.就是在走村串户为别人做木工活的时候,他的工具箱里也时刻装着笔墨纸砚,在休息的短暂时间里他都会找一个地方练习画画. 这个年轻人为了画画,特地花钱买了几只虾,每天早晨的时候

也看《我的前半生》:一辈子太长,我们只谈前半生

一.关于此剧内容 最近开启了追剧模式,不知道什么时候开始追起家庭伦理类的电视剧,或许是年龄到了吧.这部剧仍然延续了近年来的趋势,以离婚为主旋律,讲述了一个做了10年全职太太,只知道买买买的上海小女人,从离婚后无依无靠无法生活到坚强独立重新做回自己的过程.虽然现在还未大结局,但是已经穿插了各种爱情故事,小的,老的,都有这么一段,仿佛近年来的电视剧不给老人找个老伴都不好意思拍出来播放似的. 其次,剧中讲述了各个阶层的人们在大城市的生活,特别是中产阶级(请原谅我把居中贺涵和唐晶归类为中产阶级),他们工

工作时间太长以及任务完不成的恐惧

两礼拜前完成一个微信公众号需求,准备推广时,主管说只能在微信打开不利于推广,要兼容 web 端.我抱有抵触心理,因为之前的架构和微信网页授权得到的 openid 纠缠的很紧密,我感觉适配 web 端要对项目进行天翻地覆的改变,刚好又是年底,感觉时间太紧.刚好此时又有一个新项目,我就参与新项目去了. 5天前,做新项目做到中途,又提起要去做兼容 web 端.没办法,只能去做了. 遇到更换支付方式为支付宝的问题,弄了一天时间弄好.这个等我另写一篇说明支付宝等支付方式的对接. 然后就重构,改表.之前是