table文字超出省略

来源:互联网 发布:淘宝收费标准 编辑:程序博客网 时间:2024/05/21 21:38
<!doctype html>
  <html lang="en">
 <head>
   <meta charset="UTF-8" />
     <title>table文字超出省略</title>
   <style type="text/css">
       table{ width:50%;table-layout: fixed;}
      .name{width: 10%;}
      .age{width: 20%;}
       .sex{width: 30%;}
       .addr{width: 40%;}
        td{
        white-space: nowrap;/*控制单行显示*/
overflow: hidden;/*超出隐藏*/
text-overflow: ellipsis;/*隐藏的字符用省略号表示*/
        }
        table{table-layout: fixed;}
     </style>
 </head>
 <body>
    <table border="1" cellspacing="0" cellpadding="0">
        <thead>
           <tr>
               <th class="name">姓名</th>
                 <th class="age">年龄</th>
                <th class="sex">性别</th>
               <th class="addr">地址</th>
            </tr>
        </thead>
        <tbody>
            <tr>
                <td>王小帅</td>
                <td>25</td>
              <td>女</td>
               <td>嘿嘿嘿嘿嘿嘿省略吗嘿嘿嘿嘿嘿嘿省略吗嘿嘿嘿嘿嘿嘿省略吗嘿嘿嘿嘿嘿嘿省略吗</td>
            </tr>
            
       </tbody>
    </table>
</body>
 </html>