首页 > 其他 > 详细

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

时间:2014-10-20 16:46:59      阅读:259      评论:0      收藏:0      [点我收藏+]
#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和代码中红色标记的就可以实现了

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

原文:http://www.cnblogs.com/tian-chen/p/4037171.html

(0)
(0)
   
举报
评论 一句话评论(0
关于我们 - 联系我们 - 留言反馈 - 联系我们:wmxa8@hotmail.com
© 2014 bubuko.com 版权所有
打开技术之扣,分享程序人生!