table td 文字超出显示省略号

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<title></title>
<style type="text/css">
.tb{width:800px;font-size:12px;background:#6887D9}
.tb thead th{height:25px;background:#217AC4;color:white}
.tb tbody td{height:22px;background:white;padding-left:3px;}
.autocut {
    width:200px;
    overflow:hidden;
    white-space:nowrap;
    text-overflow:ellipsis;
    -o-text-overflow:ellipsis;
    -icab-text-overflow: ellipsis;
    -khtml-text-overflow: ellipsis;
    -moz-text-overflow: ellipsis;
    -webkit-text-overflow: ellipsis;
}

</style>
</head>
<body>
 <table class="tb" border="0" cellpadding="1" cellspacing="1">
    <thead>
        <tr>
            <th>Column1</th>
            <th>Column2</th>
            <th>Column3</th>
        </tr>
    </thead>
    <tbody>
        <tr>
            <td>Column1</td>
            <td width="200px;"><div class="autocut">放松的方式方法对所发生的放松的方式的方式</div></td>
            <td>Column3</td>
        </tr>
        <tr>
            <td>Column1</td>
            <td width="200px;"><div class="autocut">放松的方式方法对所发生的放松的方式的方式</div></td>
            <td>Column3</td>
        </tr>
        <tr>
            <td>Column1</td>
            <td width="200px;"><div class="autocut">放松的方式方法对所发生的放松的方式的方式</div></td>
            <td>Column3</td>
        </tr>
    </tbody>
  </table>
</body>
</html>


你可能感兴趣的:(color,background,hidden,nowRap,White)