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. .net FTP上传文件
			
    FTP上传文件代码实现: private void UploadFileByWebClient() { WebClient webClient = new WebClient(); webClient ...
    
			
    2. 
						
  2. 服务器开启https协议
			
    开启Tomcat https服务 发布企业级应用的时候遇到一个问题,就是IOS7.1之后app的下载地址URL必须是https开头的协议,所以服务器必须支持https协议. 实验环境:Mac OSX  ...
    
			
    3. 
						
  3. 小程序https Android 安卓可以发request请求,IOS 苹果 发请求失败问题
			
    如果一个机器可以发送成功,一个机器发送失败,那多半是是域名的https支持的问题 那就用腾讯云的这个ssl测试工具检测下 https://www.qcloud.com/product/ssl#user ...
    
			
    4. 
						
  4. iOS编码规范
			
      The official raywenderlich.com Objective-C style guide.   This style guide outlines the coding con ...
    
			
    5. 
						
  5. Swift3 - String 字符串、Array 数组、Dictionary 字典的使用
			
    Swift相关知识,本随笔为 字符串.数组.字典的简单使用,有理解.使用错误的地方望能指正. ///************************************************** ...
    
			
    6. 
						
  6. 【代码笔记】iOS-旋转的风扇
			
    一,效果图. 二,工程图. 三,代码. AppDelegate.m #import "AppDelegate.h" //加入头文件 #import "RoundDiskV ...
    
			
    7. 
						
  7. 原创：jar的名字可能影响maven的依赖下载
			
    自己定义了phoenix4.6-client的依赖关系POM,如下: <project xmlns="http://maven.apache.org/POM/4.0.0" x ...
    
			
    8. 
						
  8. [Erlang 0110] Erlang Abstract Format , Part 1
			
    Erlang Abstract Format并不难懂,只是枯燥一点罢了,如果把Abstract Format的文档翻译出来,其实就是Erlang教科书中语法入门的部分. Erlang Abstract ...
    
			
    9. 
						
  9. 解决问题：无法对 System程序集 添加Fakes程序集
			
    为了在单元测试中指定DateTime.Now的值,我采用Microsoft Fakes技术的Shim. 主要参考了园里的http://www.cnblogs.com/FreeDong/p/335311 ...
    
			
    10. 
						
  10. PHP对象Object的概念
			
    类提供了一个基础,可以在此基础上创建实体(即这个类所建模的实体)的特定实例,这些特定实例称为对象(object) 例如,员工管理应用程序可能包括一个EmPloyee 类.然后可以用这个类来创建和维护特 ...
    
			
    11.