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

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

上面是css

<table width="670" align="center" border="0" cellpadding="0" cellspacing="0" class="tyouhyou_11pt" id="t1">    
            <tr height="30" class="tyouhyou_8pt" bgcolor="LightCyan">
                <td align="center" width="120" bgcolor="#BBFFFF" style="border: 1px solid black;">顧客名</td>
                <td align="center" width="70" bgcolor="#BBFFFF" style="border: 1px solid black;border-left: 0px;">対象年月</td>
                <td align="center" width="80" bgcolor="#BBFFFF" style="border: 1px solid black;border-left: 0px;">派遣社員名カナ</td>
                <td align="center" width="60" bgcolor="#BBFFFF" style="border: 1px solid black;border-left: 0px;">スタッフCD</td>
                <td align="center" width="100" bgcolor="#BBFFFF" style="border: 1px solid black;border-left: 0px;">発行依頼日時</td>
                <td align="center" width="100" bgcolor="#BBFFFF" style="border: 1px solid black;border-left: 0px;">発行日時</td>
                
                <td align="center" width="120" bgcolor="#BBFFFF" style="border: 1px solid black;border-left: 0px;">送付先メールアドレス</td>
                
                <td align="center" width="20" bgcolor="#BBFFFF" style="border: 1px solid black;border-left: 0px;">&nbsp;</td>
            </tr>
            
            <s:iterator id="hakenkeiyakuConfirmVo.dataList" value="hakenkeiyakuConfirmVo.dataList">
            <tr height="30" class="tyouhyou_8pt" >
                <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>
                <td align="center" width="70" style="border-left: 0px;border-bottom: 1px solid black;
                border-right: 1px solid black;">
                    &nbsp;<s:property value="confirm_year_month" />
                </td>
                <td align="center" width="80" style="border-left: 0px;border-bottom: 1px solid black;
                border-right: 1px solid black;">
                    &nbsp;<s:property value="confirm_staff_name"/>
                </td>
                <td align="center" width="60" style="border-left: 0px;border-bottom: 1px solid black;
                border-right: 1px solid black;">
                    &nbsp;<s:property value="confirm_staff_cd"/>
                </td>
                <td align="center" width="100" style="border-left: 0px;border-bottom: 1px solid black;
                border-right: 1px solid black;">
                    &nbsp;<s:property value="confirm_order_time"/>
                </td>
                <td align="center" width="100" style="border-left: 0px;border-bottom: 1px solid black;
                border-right: 1px solid black;">
                    &nbsp;<s:property value="confirm_semd_time"/>
                </td>
                
                <td align="center" width="120" style="border-left: 0px;border-bottom: 1px solid black;
                border-right: 1px solid black;" title="<s:property value="confirm_sendMailAddr"/>">
                    &nbsp;<s:property value="confirm_sendMailAddr"/>
                </td>
                
                <td align="center" width="20" style="border-left: 0px;border-bottom: 1px solid black;
                border-right: 1px solid black;">
                <s:checkbox name="hakenSakiKanri.selectedStaff" id="hakenSakiKanri.selectedStaff" onclick="checkedYesOrNo();">
                </s:checkbox>
                <input type="hidden" name="selectedStaff" id="selectedStaff" value="<s:property value="confirm_staff_cd"/>"/>
                <input type="hidden" name="selectedKoCds" id="selectedKoCds" value="<s:property value="confirm_ko_cd"/>"/>
                <input type="hidden" name="selectedYearMonths" id="selectedYms" value="<s:property value="confirm_year_month1"/>"/>
                <input type="hidden" name="selectedOrderTimes" id="selectedOts" value="<s:property value="confirm_order_time"/>"/>
                </td>
            </tr>
        </s:iterator>
        </table>

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

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