table:设置边距,td内容过长用省略号代替

1.table:设置边距

合并表格边框border-collapse: collapse，然后用th，td的padding设置内容和边框之间的空隙padding。

2.td内容过长用省略号代替

在table中必须设置style:table-layout: fixed;这条属性就是让table的内部布局固定大小。这个时候就用width属性调节td的长度。之后在添加如下：td {white-space:nowrap;overflow:hidden;text-overflow: ellipsis;}

 <!DOCTYPE html>

 <html>

 <head>

     <meta charset="utf-8">

     <title></title>

     <style type="text/css">

         .card{

             background-color: white;

             margin-top: 10px;

             border-top: 1px solid #B5B5B5;

             border-bottom: 1px solid #B5B5B5;

             padding: 5px;

         }

         table {

             /*合并表格边框*/

             border-collapse: collapse;

             /*让table的内部布局固定大小*/

             table-layout: fixed;

             /*设置宽度*/

             width:100%;

         }

         td {

             /*设置边距*/

             padding: 3px 10px 3px 0px;

             /*规定段落中的文本不进行换行*/

             white-space:nowrap;

             /*关闭滚动条*/

             overflow:hidden;

             /*溢出的文字显示为省略号*/

             text-overflow: ellipsis;

         }

     </style>

 </head>

 <body>

     <div class="card">

         <table border="0">

             <tr>

                 <td style="text-align: right;width:30%;">请求类型:</td>

                 <td style="width:70%;">维修</td></tr>

             <tr style="font-size: 12px;">

                 <td style="text-align: right;">用户姓名:</td>

                 <td>张小三张小三张小三张小三张小三张小三张小三张小三张小三张小三张小三张小三</td>

             </tr>

             <tr style="font-size: 12px;">

                 <td style="text-align: right;">联系电话:</td>

                 <td>135********</td>

             </tr>

             <tr style="font-size: 12px;">

                 <td style="text-align: right;">创建时间:</td>

                 <td>2016年4月23日 16:30</td>

             </tr>

         </table>

     </div>

 </body>

 </html>




显示结果:




 
												


											
table:设置边距,td内容过长用省略号代替的更多相关文章
	

    
								
  1. td内容过长，省略号表示
		
    .word{ min-width:100px; max-width:200px; overflow:hidden; white-space:nowrap; text-overflow:ellipsis ...
    
		
    2. 
						
  2. table中的td内容过长显示为固定长度，多余部分用省略号代替
		
    如何使td标签中过长的内容只显示为这个td的width的长度,之后的便以省略号代替. 给table中必须设置属性: table-layout: fixed; 然后给 td 设置: white-spac ...
    
		
    3. 
						
  3. table表格宽度固定，同时td内容过长也不会被撑开
		
    table表格宽度固定,同时td内容过长也不会被撑开,设置如下css: table{table-layout:fixed;word-break:break-all;}
    
		
    4. 
						
  4. 当table中的td内容过多，显示不完全，用省略号表示。
		
    .format{ min-width:100px; max-width:200px; overflow:hidden; white-space:nowrap; text-overflow:ellips ...
    
		
    5. 
						
  5. Android TextView内容过长加省略号，点击显示全部内容
		
    在Android TextView中有个内容过长加省略号的属性,即ellipsize,用法如下: 在xml中:android:ellipsize="end"    省略号在结尾an ...
    
		
    6. 
						
  6. Android中TextView内容过长加省略号
		
          textview中有个内容过长加省略号的属性,即ellipsize,用法如下: 在xml中 Android:ellipsize = "end"   省略号在结尾 and ...
    
		
    7. 
						
  7. Android TextView内容过长加省略号
		
    在Android TextView中有个内容过长加省略号的属性,即ellipsize,用法如下: 在xml中: android:ellipsize = "end" //省略号在结尾 ...
    
		
    8. 
						
  8. django2.1---后台管理 admin 字段内容过长，省略号替代
		
    用django admin做后台的时候, 有些字段内容太长,像文章,长评论,新闻等可以限制显示长度,超出部分用...代替 1.在model.py中 def short_content(self): i ...
    
		
    9. 
						
  9. css内容过长显示省略号的几种解决方法
		
    单行文本(方法一): 语法: text-overflow : clip | ellipsis 参数: clip : 不显示省略标记(...),而是简单的裁切 (clip这个参数是不常用的!) elli ...
    
		
    10. 
		

	


随机推荐
	

    
									
  1. Java设计模式 -- 基本原则
			
    这两个星期开始系统地学习设计模式相关的知识,对每一个原则或者设计模式主要从下面几点分析学习: 定义:简单地描述其作用 解决问题:说明该原则或设计模式解决什么限制条件下的问题. 结构图:绘制相关例子的U ...
    
			
    2. 
						
  2. 今天思考一个问题，PHP const和static的区别
			
    static关键字在类中是,描述一个成员是静态的,static能够限制外部的访问,因为static后的成员是属于类的,是不属于任何对象实例,其他类是无法访问的,只对类的实例共享,能一定程序对该成员尽心 ...
    
			
    3. 
						
  3. JavaMail发送邮件第一版
			
    首先,我们先来了解一个基本的知识点,用什么工具来发邮件? 简单的说一下,目前用的比较多的客户端:OutLook,Foxmail等 顺便了解一下POP3.SMTP协议的区别: POP3,全名为" ...
    
			
    4. 
						
  4. Spring的IOC和AOP之深剖
			
    今天,既然讲到了Spring 的IOC和AOP,我们就必须要知道 Spring主要是两件事: 1.开发Bean:2.配置Bean.对于Spring框架来说,它要做的,就是根据配置文件来创建bean实例 ...
    
			
    5. 
						
  5. JavaScript简单分页，兼容IE6，~3KB
			
    简介 兼容IE6+及现代浏览器的简单分页,支持同一页面多个分页. 使用 Browser <link rel="stylesheet" href="css/GB-pa ...
    
			
    6. 
						
  6. 地图中插入表格——ArcMap篇
			
    在制作专题图的过程中,不但要有地理要素表示空间位置,经常还要在图的周围制作一些表格数据.这里对ArcMap中的插入方法进行总结. 方法一:插入对象 利用菜单中的"插入"-" ...
    
			
    7. 
						
  7. 整理UIImagePickerController问题
			
    [assetsLibrary addAssetsGroupAlbumWithName:@"iOSDevTip1" resultBlock:^(ALAssetsGroup *grou ...
    
			
    8. 
						
  8. Android 7.0 Nougat牛轧糖 发布啦
			
    Android 7.0 Nougat牛轧糖 发布啦 Android 7.0 Nougat 牛轧糖于本月发布了. 从官方blog里可以了解到这个版本的新特性. Android 7.0 从2016年8月正 ...
    
			
    9. 
						
  9. 移动端嵌入pdf.js远程请求pdf出现（206）
			
    最近在做移动端的开发,需要嵌入pdf进行预览.看了很多的js组件后选择了pdf.js:使用起来还是比较方便的,至于使用网上有很多的教程. 但在使用过程中出现了如下一个问题(我做的是IOS系统): 问题 ...
    
			
    10. 
						
  10. 两listview联动
			
    package com.mttz; import java.util.ArrayList;import java.util.List; import com.mttz.adapter.CaiDanAD ...
    
			
    11.