写在前面:

  1、第一种从网上找到的解决方式添加table-layout:fixed

  2、第二种添加div

  3、字符串过长产生省略号的css语句为如下三种合用:overflow:hidden;text-overflow:ellipsis;white-space:nowrap;但是在table中并不起作用,即使给td固定宽度,依然会被撑开,解决方案如下

1、

效果显示:

table{
width:360px;
height:40px;
table-layout: fixed; }

在table  css中插入

  table-layout: fixed;
在W3Cschool上对该属性说明如下:tableLayout 属性用来显示表格单元格、行、列的算法规则。fixed:列宽由表格宽度和列宽度设定
全部代码:
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<title></title>
<link rel="stylesheet" href="">
<style>
table{
width:360px;
height:40px;
table-layout: fixed;
}
table tr td{width:120px;border:none;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;}
</style>
</head>
<body>
<table width="360px" height="40px">
<tr><td><strong>博客园<strong></td>
<td><strong>a67</strong></td>
</tr>
<tr>
<td>固定表格布局与自动表格布局相比,允许浏览器更快地对表格进行布局。
在固定表格布局中,水平布局仅取决于表格宽度、列宽度、</td>
<td>表格边框宽度、单元格间距,而与单元格的内容无关。
通过使用固定表格布局,用户代理在接收到第一行后就可以显示表格。</td>
</tr>
</table>
</body>
</html>

2、在td中添加div,效果显示同一

代码:

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<title></title>
<link rel="stylesheet" href="">
<style>
table{
width:360px;
height:40px;
table-layout: fixed;
}
.test1,.test2{width:120px;border:none;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;}
</style>
</head>
<body>
<table width="360px" height="40px">
<tr><td><strong>博客园<strong></td>
<td><strong>a67</strong></td>
</tr>
<tr>
<td><div class="test1">固定表格布局与自动表格布局相比,允许浏览器更快地对表格进行布局。
在固定表格布局中,水平布局仅取决于表格宽度、列宽度、</div></td>
<td><div class="test2">表格边框宽度、单元格间距,而与单元格的内容无关。
通过使用固定表格布局,用户代理在接收到第一行后就可以显示表格。</div></td>
</tr>
</table>
</body>
</html>

补充说明:

如果希望表格中列宽不一样,请把所有对应的列宽全部添加宽度,否则就会被均分啦

table中超长字符串省略号表示两种方法的更多相关文章

  1. Python 中格式化字符串 % 和 format 两种方法之间的区别

    Python2.6引入了 format 格式化字符串的方法,现在格式化字符串有两种方法,就是 % 和 format ,具体这两种方法有什么区别呢?请看以下解析. # 定义一个坐标值 c = (250, ...

  2. 在Delphi中使用C++对象(两种方法,但都要改造C++提供的DLL)

    Delphi是市场上最好的RAD工具,但是现在C++占据着主导地位,有时针对一个问题很难找到Delphi或Pascal的解决方案.可是却可能找到了一个相关的C++类.本文描述几种在Delphi代码中使 ...

  3. .net中创建xml文件的两种方法

    .net中创建xml文件的两种方法 方法1:根据xml结构一步一步构建xml文档,保存文件(动态方式) 方法2:直接加载xml结构,保存文件(固定方式) 方法1:动态创建xml文档 根据传递的值,构建 ...

  4. Js 字符串拼接的两种方法

    字符串拼接的两种方法 用数组的方法的好处是:避免变量重新定义.赋值 <!DOCTYPE html> <html lang="en"> <head> ...

  5. (转)Shell中获取字符串长度的七种方法

    Shell中获取字符串长度的七种方法 原文:http://blog.csdn.net/jerry_1126/article/details/51835119 求字符串操作在shell脚本中很常用,下面 ...

  6. golang中获取字符串长度的几种方法

    一.获取字符串长度的几种方法   - 使用 bytes.Count() 统计   - 使用 strings.Count() 统计   - 将字符串转换为 []rune 后调用 len 函数进行统计   ...

  7. 在shell script中进行数值运算的两种方法

    方法1:使用"$((计算式))"的方式进行数值运算,不需要使用declare命令显示声明数值型变量来存储计算结果: 方法2:使用declare命令配合"-i"选 ...

  8. Android中Intent传递对象的两种方法(Serializable,Parcelable)

    今天要给大家讲一下Android中 Intent中如何传递对象,就我目前所知道的有两种方法,一种是Bundle.putSerializable(Key,Object);另一种是 Bundle.putP ...

  9. 在List中找出最大值的两种方法

    先说需求:找出一个对象List中,某个属性值最大的对象. 1.定义对象 private class A { public int ID { get; set; } public string Name ...

随机推荐

  1. HTML高级标签(2)————窗体分帧(2)————后台管理页面

    使用frameset进行窗体分帧.构建简易的后台页面.这篇博客就作为一个简易后台管理页面的实战演练. watermark/2/text/aHR0cDovL2Jsb2cuY3Nkbi5uZXQvd3px ...

  2. js执行环境深入研究

    js 声明函数是创建函数对象的过程,当创建函数对象时,函数对象的[[scope]] =连当前执行环境对象的作用域(栈顶执行环境--当执行函数时,js会将该函数的执行环境对象入栈) 当为全局函数时,如: ...

  3. UILabel + 导入字体

    UILabel * label = [[UILabel alloc]initWithFrame:CGRectMake(10, 100, 300, 100)]; 1.设置文字颜色 label.textC ...

  4. C#同步数据库的数据到Neo4J

    数据组件采用https://github.com/Readify/Neo4jClient 在nuget里面有 需要注意的是 以下是示例代码: using System;using System.Col ...

  5. 在Yii框架中使用PHPExcel

    PHPExcel是一个比较好用的php读取excel文件的类库,今天遇到了在yii中如何加载PHPExcel类文件的问题,因为Yii的autoload机制是安装类名去找文件,即文件名就是相应的类名,而 ...

  6. Windows下安装PHP扩展及资源下载地址(memcached为例)

    官方下载的php安装包ext目录里以经包含了常用的php扩展,但某些情况下并不能满足我们项目需求,比如memcache扩展就不在官方的php安装包里.这时就需要我们自己去下载安装. 本文列出php官方 ...

  7. mysql事物处理

    mysql事物主要用于处理操作量大,复杂度高的数据.比如说,在人员管理系统中,你删除一个人员,你既要删除人员的基本资料,也要删除和该人员相关的信息,如信箱,文章等.这样,这些数据库操作语句就构成一个事 ...

  8. iOS下Html页面中input获取焦点弹出键盘时挡住input解决方案

    问题描述 iOS系统下,移动web页面,inpu获取焦点弹出系统虚拟键盘时,偶尔会出现挡住input的情况,尽管概率不大,但是十分影响用户体验. 问题重现 原始页面:页面中有header.main.f ...

  9. Amzon MWS API开发之 上传数据

    亚马逊上传数据,现有能操作的功能有很多:库存数量.跟踪号.价格.商品....... 我们可以设置FeedType值,根据需要,再上传对应的xml文件即可. 下面可以看看FeedType类型 这次我们拿 ...

  10. [置顶] lvs-tun隧道模式搭建

    一.lvs直接路由原理 由于图片还要一张一张上传,可以到下面网站下载我的word版本: http://download.csdn.net/user/y0908105023 补充基础知识: OSI(Op ...