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. 百度地图隐藏BMKAnnotationView
			
    BMKAnnotationview.hidden 失效,只能移除Annotation BMKPinAnnotationView设置setHidden为yes时不能隐藏
    
			
    2. 
						
  2. React Native学习笔记之2
			
    1:如何创建一个react native工程 首先进入到指定文件夹里面,然后在终端执行react-native init ReactNativeProject :其中ReactNativeProjec ...
    
			
    3. 
						
  3. 梳理delegate相关概念
			
    一.前言 可能项目规模较小,项目中除了增删改查就只剩下业务流程,以前都没怎么弄明白的东西时间长了就越发的模糊了... 二.使用场景 MSDN:delegate 是一种可用于封装命名或匿名方法的引用类型 ...
    
			
    4. 
						
  4. C#语言基础
			
    第一部分 了解C# C#是微软公司在2000年7月发布的一种全新且简单.安全.面向对象的程序设计语言,是专门为.NET的应用而开发的.体现了当今最新的程序设计技术的功能和精华..NET框架为C#提供了 ...
    
			
    5. 
						
  5. ubuntu下修改键位
			
    尴尬的背景: 服役5年的笔记本,最近键盘失灵,部分键位彻底失去响应.最蛋疼的是左右方向键都不能用了 ○|￣|_ 解决方案是,通过xmodmap命令,用其他相对鸡肋些的键位替代方向键. 1 查看各个键位 ...
    
			
    6. 
						
  6. PL/SQL连接错误：ora-12705:cannot access NLS data files or invalid environment specified
			
    适合自己的解决方法: 排查问题: 1. 你没有安装Oracle Client软件.这是使用PL/SQL Developer的必须条件.安装Oracle Client后再重试.2. 你安装了多个Orac ...
    
			
    7. 
						
  7. HTTP Method 之 Post VS. Get
			
    引言 WebAPI 现在非常火的轻量服务框架,因其使用得使用了Http协议,并且具备了可协商内容(生成不同内容格式)等优势,所以在互联网业务中被广泛使用. 那作为HTTP最常用的两个方法Get和Pos ...
    
			
    8. 
						
  8. 算法是什么我记不住，But i do it my way. （二）
			
    昨天做了一道算法题给大家分享了下我的解法,有给出建设性意见的,有支持的还有看得一知半解的.自己想了想的确有可以优化的地方,贴出优化方案.原题和解答过程在这里http://www.cnblogs.com ...
    
			
    9. 
						
  9. JSON学习笔记一 —— 一些与移动端交互产生JSON数据的方法
			
    /**     * 测试的返回JSon方法,正式的不会用     * @author MrHandler     * @param reqCode     * @param joinStr     * ...
    
			
    10. 
						
  10. float4数据类型
			
    GPU是以四维向量为基本单位来计算的.4个浮点数所组成的float4向量是GPU内置的最基本类型.使用GPU对两个float4向量进行计算,与CPU对两个整数或两个浮点数进行计算一样简单,都是只需要一 ...
    
			
    11.