CSS,bootstrap表格控制当td内容过长时用省略号表示,以及在不使用bootstrap时过长也用省略号表示

简介:

转载

首先需要在table中设置table-layout:fixed;

<table style="table-layout:fixed"></table>

然后在表头th中设置每列的宽度

<table style="table-layout:fixed">
<th width="10%">Title01</th>
<th width="20%">Title02</th>
<!--  其他th -->
</table>

然后在需要当长度大于一定数值时用省略号表示的td上面添加样式

复制代码
<table style="table-layout:fixed">
<th width="10%">Title01</th>
<th width="20%">Title02</th>
<!--  其他th -->
<c:foreach items = ""  var ="" varStatus = "">
<td><title01</td>
<td style="overflow:hidden;white-space:nowrap;text-overflow:ellipsis;"><title02</td>
<!--  other td   -->
</c:foreach>
</table>
复制代码

bootstrap在设置表格大小时需要设置到th中,否则可能不会生效,以上在bootstrap中可用

 当不使用bootstrap的时候可以使用如下样式,网上搜索到的,比较好用

复制代码
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">   
<html>   
<head>   
   <style type="text/css">   
.mytable {   
   table-layout: fixed;   
   width: 98% border:0px;   
   margin: 0px;   
}   
  
.mytable tr td {   
    text-overflow: ellipsis; /* for IE */  
    -moz-text-overflow: ellipsis; /* for Firefox,mozilla */  
    overflow: hidden;   
    white-space: nowrap;   
    border: 1px solid;   
    text-align: left   
}   
</style>   
</head>   
<body>   
    <table width="500px" class="mytable">   
        <tr>   
            <td width="20%">再别康桥</td>   
            <td width="80%">
                轻轻我走了,正如我轻轻地来,我挥一挥衣袖,不带走一片云彩
            </td>  
             
        </tr>   
    </table>   
</body>   
</html>  
复制代码

相关文章
N..
|
4月前
|
开发框架 前端开发 UED
Bootstrap的CSS组件
Bootstrap的CSS组件
N..
45 0
|
2月前
|
前端开发 UED
使用HTML和CSS创建响应式表格
在网页设计中,表格是一种组织和展示数据的有效方式。本文档将指导你如何使用HTML和CSS来创建一个既美观又响应式的表格,以便在不同设备和屏幕尺寸上都能良好显示。我们将涵盖基础的HTML表格结构,样式美化以及如何实现响应式布局,使得表格内容在小屏设备上也能清晰阅读
84 0
|
16天前
|
前端开发
HTML+CSS基础知识(6)背景的设置、表格的设计、表单的设计和框架集
这篇文章详细介绍了如何在HTML和CSS中设置背景、设计表格、创建表单以及使用框架集,并通过代码示例和测试结果展示了具体的实现方法和效果。
HTML+CSS基础知识(6)背景的设置、表格的设计、表单的设计和框架集
|
3月前
|
前端开发
CSS常用属性之(列表、表格、鼠标)属性,(如果想知道CSS的列表、表格、鼠标相关的属性知识点,那么只看这一篇就足够了!)
CSS常用属性之(列表、表格、鼠标)属性,(如果想知道CSS的列表、表格、鼠标相关的属性知识点,那么只看这一篇就足够了!)
|
3月前
|
Web App开发 移动开发 前端开发
Web网页制作-知识点(3)——HTML5新增标签、CSS简介、CSS的引入方式、选择器、字体属性、背景属性、表格属性、关系选择器 二
Web网页制作-知识点(3)——HTML5新增标签、CSS简介、CSS的引入方式、选择器、字体属性、背景属性、表格属性、关系选择器 二
34 1
|
3月前
|
移动开发 前端开发 HTML5
Web网页制作-知识点(3)——HTML5新增标签、CSS简介、CSS的引入方式、选择器、字体属性、背景属性、表格属性、关系选择器一
Web网页制作-知识点(3)——HTML5新增标签、CSS简介、CSS的引入方式、选择器、字体属性、背景属性、表格属性、关系选择器 一
60 1
|
3月前
|
前端开发 容器
用CSS将文字超出部分变为省略号的方法
用CSS将文字超出部分变为省略号的方法
29 0
|
4月前
|
前端开发
CSS 表格
CSS 表格。
28 1
|
4月前
|
前端开发
CSS表格
【5月更文挑战第4天】CSS表格。
38 6
|
4月前
|
前端开发 JavaScript 开发者
【专栏:HTML与CSS实践篇】CSS框架(Bootstrap/Foundation)快速上手
【4月更文挑战第30天】Bootstrap和Foundation是两种流行的CSS框架,用于构建响应式网页。它们包含预定义的样式、栅格系统和组件,加速开发流程。Bootstrap以其12列栅格系统闻名,而Foundation提供更定制化和模块化选项。了解并熟练运用这些框架的基本概念和组件,结合最佳实践和性能优化,能帮助开发者高效创建符合现代设计趋势的网页项目。
91 3
下一篇
云函数