zoukankan      html  css  js  c++  java
  • 用css控制table td内文字超出隐藏

    (如有错敬请指点,以下是我工作中遇到并且解决的问题)

    效果图:


    重点是把table设置为table-layout: fixed;
    超出的文字隐藏的效果才有。
    p标签超出的文字隐藏的效果不需要设置这个内容就可以有效果。

    <table border="1">
    	<tbody>
    		<tr><td>1</td><td>fdsfsdafdsafsafdsfsdafdsafsafdsfsdafdsafsajghjgkghfjgfjgfjfgaa</td><td>1</td></tr>
    		<tr><td>1</td><td>1</td><td>1</td></tr>
    	</tbody>
    </table>
    


    body{
    	margin: 0;
    	padding: 0;
    	 100%;
    }
    table{
    	border-collapse: collapse;
    	 96%;
    	margin: 0 2%;
    	table-layout: fixed;
    }
    tr{
    	 100%;
    }
    tr td{
    	overflow: hidden;
    	white-space: nowrap;
    	text-overflow: ellipsis;
    	word-wrap: break-word;
    }
    tr td:nth-child(1),tr td:nth-child(3){
    	 20%;
    }
    tr td:nth-child(2){
    	 56%;
    }
    
  • 相关阅读:
    Mysql日志管理
    Mysql 安全和DCL语句
    Mysql DDL语句之视图
    Mysql增删改查(DML、DQL)
    Mysql操作之部分DDL语句
    如何做事情
    temp
    asp.net入门
    希望尽快回忆起来
    需求?
  • 原文地址:https://www.cnblogs.com/hiuman/p/7347403.html
Copyright © 2011-2022 走看看