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的序列化和持久化的区别与联系
			
      持久化(Persistence) 即把数据(如内存中的对象)保存到可永久保存的存储设备中(如磁盘).持久化的主要应用是将内存中的对象存储在关系型的数据库中,当然也可以存储在磁盘文件中.XML数据文 ...
    
			
    2. 
						
  2. python语言中的编码问题
			
    在编程的过程当中,常常会遇到莫名其妙的乱码问题.很多人选择出了问题直接在网上找答案,把别人的例子照搬过来,这是快速解决问题的一个好办法.然而,作为一个严谨求实的开发者,如果不从源头上彻底理解乱码产生的 ...
    
			
    3. 
						
  3. 使用PowerShell修改操作系统“环境变量”
			
      有时候我们需要命令行工具,但在使用前往往需要先导航至命令工具所在的目录,比如:stsadm 我们首先需要导航至(以SharePoint2013为例):C:\Program Files\Common ...
    
			
    4. 
						
  4. android 自定义动画
			
    android自定义动画注意是继承Animation,重写里面的initialize和applyTransformation,在initialize方法做一些初始化的工作,在applyTransfor ...
    
			
    5. 
						
  5. xUtils 3.0 post使用详解
			
    github:https://github.com/wyouflf/xUtils3 xUtils3简介 xUtils 包含了很多实用的android工具. xUtils 支持超大文件(超过2G)上传, ...
    
			
    6. 
						
  6. Laravel大型项目系列教程（三）之发表文章
			
    Laravel大型项目系列教程(三)之发表文章 一.前言 上一节教程中完成了用户管理,这节教程将大概完成发表Markdown格式文章并展示的功能. 二.Let's go 1.数据库迁移 文章模块中我们 ...
    
			
    7. 
						
  7. 腾讯开放平台 手机QQ登录 错误码:110406 解决办法
			
    作者:Panda Fang 出处:http://www.cnblogs.com/lonkiss/p/4204284.html 原创文章,转载请注明作者和出处,未经允许不可用于商业营利活动 腾讯开发平台 ...
    
			
    8. 
						
  8. 基于JQuery实现的文本框自动填充功能
			
    1. 实现的方法 /* * js实现的文本框的自动完成功能 */ function doAutoComplete(textid,dataid,url){ $("#" + texti ...
    
			
    9. 
						
  9. Spark概述
			
    背景 目前按照大数据处理类型来分大致可以分为:批量数据处理.交互式数据查询.实时数据流处理,这三种数据处理方式对应的业务场景也都不一样: 关注大数据处理的应该都知道Hadoop,而Hadoop的核心为 ...
    
			
    10. 
						
  10. 使用maven给spring项目打可直接运行的jar包（配置文件内置外置的打法）
			
    从网上看过许多打jar包的例子,大多是将配置文件打进jar包的.经过本人一番研究,终于搞清楚了怎样将jar包的配置文件外置. 废话不说,直接上spring的pom.xml的配置文件. <proj ...
    
			
    11.