首先需要在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: % 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>

CSS，bootstrap表格控制当td内容过长时用省略号表示，以及在不使用bootstrap时过长也用省略号表示的更多相关文章

  1. table:设置边距,td内容过长用省略号代替

    table:设置边距,td内容过长用省略号代替 1.table:设置边距 合并表格边框border-collapse: collapse,然后用th,td的padding设置内容和边框之间的空隙pad ...

  2. table表格宽度固定，同时td内容过长也不会被撑开

    table表格宽度固定,同时td内容过长也不会被撑开,设置如下css: table{table-layout:fixed;word-break:break-all;}

  3. css中设置table中的td内容自动换行

    word-break:break-all和word-wrap:break-word都是能使其容器如DIV的内容自动换行. 它们的区别就在于: 1,word-break:break-all 例如div宽 ...

  4. css控制table的td宽度

    今天发现即使设置table的td.th宽度,仍是不管用,是根据table的td的内容来适应宽度,导致其他的th.td丢失. 下图就是浏览器渲染的table,导致缺失"端口"这一列, ...

  5. 这些HTML、CSS知识点，面试和平时开发都需要 No1-No4（知识点：HTML、CSS、盒子模型、内容布局）

    这些HTML.CSS知识点,面试和平时开发都需要 No1-No4   系列知识点汇总 这些HTML.CSS知识点,面试和平时开发都需要 No1-No4(知识点:HTML.CSS.盒子模型.内容布局) ...

  6. Jquery改变td内容为1的颜色

    Jquery改变td内容为1的颜色<table id="tb" > <tr> <td val="1">1</td> ...

  7. [TimLinux] JavaScript table的td内容超过宽度缩为三个点

    1. 思路 CSS控制td内容自动缩为三个点 JS控制鼠标悬浮显示td全部内容 2. 实现 HTML代码: <!DOCTYPE html> <html> <head> ...

  8. td内容超出 以…显示

    table中的td内容超出以省略号显示,需满足的条件是: <style type="text/css"> table{ table-layout: fixed; bor ...

  9. JQuery td内容获取，修改

    业务需求:获取某个表格中每一行第四个td内容,并根据内容为当前td重新赋值 $(".listtable.table.table-striped.table-bordered.table-ho ...

随机推荐

  1. LoadRunner如何监控Tomcat性能

    使用LoadRunner做性能测试,一般的直觉是LR只能完成脚本录制和编写模拟用户的请求行为,但是在某些情况下,要监控一些中间件或web服务器的性能时,就不能通过录制脚本来完成了,那么就需要手工来编写 ...

  2. ASP.Net MVC开发基础学习笔记（3）：Razor视图引擎、控制器与路由机制学习

    一.天降神器“剃须刀” — Razor视图引擎 1.1 千呼万唤始出来的MVC3.0 在MVC3.0版本的时候,微软终于引入了第二种模板引擎:Razor.在这之前,我们一直在使用WebForm时代沿留 ...

  3. ASP.NET MVC3 中整合 NHibernate3.3、Spring.NET2.0 时 Session 关闭问题

    一.问题描述 在向ASP.NET MVC中整合NHibernate.Spring.NET后,如下管理员与角色关系: 类public class Admin { public virtual strin ...

  4. spring mvc 入门配置

    1. 把所需jar拷贝到工程目录下WEB-INF/lib 2. 配置WEB.xml,配置前端控制器 org.springframework.web.servlet.DispatcherServlet ...

  5. C#遍历enum类型

    对于enum类型: 使用foreach遍历enum类型的元素并填充combox foreach ( HatchStyle hs1 in Enum.GetValues(typeof(HatchStyle ...

  6. 【原】iOS学习41之多线程

    1. 多线程概述 1> 程序.进程和进程的概念 程序:由源代码生成的可执行应用.(例如:QQ.app) 进程:一个正在运行的程序可以看做一个进程.(例如:正在运行的QQ就是一个进程),进程拥有独 ...

  7. BZOJ2159 : Crash 的文明世界

    $x^k=\sum_{i=1}^k Stirling2(k,i)\times i!\times C(x,i)$ 设$f[i][j]=\sum_{k=1}^n C(dist(i,k),j)$. 则可以利 ...

  8. 【转】推荐UML插件AmaterasUML

    基于Green UML在使用过程中的问题(对于大工程,点击生成类图后不响应),自己只能再次寻找其他的插件.在无意中,发现AmaterasUML. 官方网站:http://amateras.source ...

  9. Android MuPDF 阅读PDF文件

    MuPDF是一款轻量级的开源软件,可以用来阅读PDF文件.下载完源代码以后,想要运行成功,除了Android SDK之外,还需要Android NDK环境,因此有点麻烦. 但是一旦安装完必须的环境以后 ...

  10. OpenResty+lua+GraphicsMagick生成缩略图

    1.安装GraphicsMagick 下载地址:http://sourceforge.net/projects/graphicsmagick/files/graphicsmagick/1.3.19/G ...