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

关于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="http://www.mamicode.com/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="http://www.mamicode.com/confirm_ko_name" />">19                     &nbsp;<s:property value="http://www.mamicode.com/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="http://www.mamicode.com/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="http://www.mamicode.com/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="http://www.mamicode.com/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="http://www.mamicode.com/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="http://www.mamicode.com/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="http://www.mamicode.com/confirm_sendMailAddr"/>">44                     &nbsp;<s:property value="http://www.mamicode.com/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="http://www.mamicode.com/52                 <input type="hidden" name="selectedKoCds" id="selectedKoCds" value="http://www.mamicode.com/53                 <input type="hidden" name="selectedYearMonths" id="selectedYms" value="http://www.mamicode.com/54                 <input type="hidden" name="selectedOrderTimes" id="selectedOts" value="http://www.mamicode.com/55                 </td>56             </tr>57         </s:iterator>58         </table>

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

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

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