主要代码:
table{
table-layout: fixed;
}
td{
white-space: nowrap;
overflow: hidden;
text-overflow: ellipsis;
}
原理:
本方法用于解决表格单元格
内容过多时的美观问题,主要涉及到4句CSS样式:
1. table-layout: fixed
由于table-layout的默认值是auto,即table的宽高将取决于其内容的多寡,如果内容的体积无法估测,那么最终表格的呈现形式也无法保证了,fixed一下就好了。(注意:此样式是关键)
2. white-space: nowrap
是为了保证无论单元格(TD)中文本内容有多少,都不会自动换行,此时多余的内容会在水平方向撑破单元格。
3. overflow: hidden
隐藏超出单元格的部分。
4. text-overflow: ellipsis
将被隐藏的那部分用省略号代替。
效果图:
![](http://pic002.cnblogs.com/images/2012/377582/2012050715122618.png)
转转:http://www.cnblogs.com/warrentech/archive/2012/05/09/table_ellipsis.html
分享到:
相关推荐
CSS实现超长字段用省略号代替 td的属性中注意nowrap有效不能设置width,但是可以设置table的width
在给定的“CSS实现多行文字显示省略号效果.zip”压缩包中,包含了一个名为“2.css”的样式表文件,它使用了`-webkit-line-clamp`属性来指定省略的行数,以及一个“1.html.txt”的HTML文件,用于展示这个效果。...
CSS 省略号 完美解决 鼠标放上显示不能看部分的内容
本主题聚焦于如何使用纯CSS技术来实现一个既美观又实用的表格滚动条效果。这种效果可以让用户在不改变表格整体布局的情况下,优雅地浏览表格中的所有内容。 首先,我们来探讨CSS在创建滚动条样式上的关键属性。CSS3...
本文将详细介绍如何仅使用CSS来实现文本超出部分用省略号(...)显示的效果。 #### CSS实现原理 1. **`display:block;`**:此属性用于设置元素为块级元素。在本例中,将容器设置为块级元素,以便更好地控制其布局...
CSS实现长标题用省略号显示,以前用JS用网络语言实现,其实CSS也可以的 不错哦~
4. **背景色**:使用 `background-color` 属性可以改变表格、行或单元格的背景颜色,如 `background-color: #f0f0f0;`。 5. **文字对齐**:`text-align` 属性用于设置文本水平对齐,如 `text-align: center;`。`...
本话题主要涉及以下几个关键知识点:表格题头的拖动、超出宽度显示省略号、滚动条的使用以及跨浏览器兼容性,特别是针对IE、Firefox(FF)和Safari这三大主流浏览器。 1. **表格题头拖动**:这是一种交互设计特性,...
本文将深入探讨如何使用CSS实现超出文本指定宽度用省略号代替以及禁止文本换行。 1. **一般文字截断** 当我们希望文本在特定宽度后被截断并用省略号表示时,可以使用以下CSS样式: ```css .text-overflow { ...
html单元格显示不下的文本用省略号代替,并且鼠标悬停在单元格下面用div显示该单元格的全部文本信息。
CSS实现单行、多行文本溢出显示省略号(…)示例文档,自行下载查看
"利用JS+CSS实现滚动表格数据展示"是一个常见的需求,它可以帮助用户逐行浏览大量的信息,而无需手动调整窗口大小。下面将详细介绍如何通过JavaScript(JS)和层叠样式表(CSS)来实现这一功能。 首先,我们需要...
由于`max-width`属性在IE6和IE7中不受支持,所以对于这些老版本的IE浏览器,我们需要使用`width`属性代替。同时,由于`::after`伪元素在IE8及以下版本不支持,所以这部分用户可能看不到省略号。为确保兼容性,可以...
在网页设计中,为了模拟Excel表格的样式和功能,我们可以借助CSS(层叠样式表)来实现。CSS是一种用于描述HTML或XML(包括如SVG、MathML等各种XML方言)文档样式的语言,它能让我们精确控制网页元素的布局和外观。...
CSS3Pie是一个开源JavaScript库,通过VML(Vector Markup Language)技术,使IE6-IE8也能支持圆角效果。只需在HTML文件中引入PIE.js,然后在需要圆角的元素上添加`behavior: url(/path/to/PIE.htc)`,即可实现兼容。...
为了实现内容过长时以省略号表示的效果,我们可以采用CSS样式来控制表格的显示。以下是具体解决方法的详细解释: 首先,我们创建一个基本的Bootstrap表格结构: ```html ;'>商品名称 ;'>详细介绍 ;'>购买...
这是一段非常非常长的文本,它超过了我们想要显示的字符数限制,所以我们需要用HTML和CSS来实现超出部分用省略号表示。 ``` 接下来,我们需要在CSS中应用样式来实现省略号效果。通常,我们会使用`white-space`、`...
- `margin`用于设置单元格之间的外部空间,但要注意,对于表格,浏览器默认会忽略`margin`,所以通常使用`border-spacing`代替。 6. **文本样式**: - `text-align`控制单元格内容的水平对齐,如左对齐、居中、右...
在CSS(层叠样式表)中,表格样式是网页设计中的一个重要组成部分,它能帮助我们打造出美观且功能丰富的数据展示区域。这篇博文“CSS表格样式1”可能详细讲解了如何利用CSS来定制HTML表格的外观和布局。由于描述中...
在探讨IE6、IE7、IE8对CSS和JavaScript支持的差异时,我们可以发现一系列显著的兼容性问题和解析规则的变化。以下是对这些差异的详细分析: 1. **JavaScript性能和垃圾收集**: - 在IE6中,JScript引擎在处理大量...