首先需要在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测试场景中添加负载生成器

    如何在LoadRunner测试场景中添加负载生成器 本文对如何在LoadRunner的测试场景中添加负载生成器,如何使用负载生成器的方法,总结形成操作指导手册,以指导测试人员指导开展相关工作. 1.什 ...

  2. Liferay 6.2 改造系列之五：修改默认站点的页面内容

    相关页面可以通过/portal-master/portal-impl/src/portal.properties文件配置进行修改: 登录页: ## ## Default Landing Page ## ...

  3. js动画实现侧边栏分享

    <!DOCTYPE HTML> <html> <head> <meta http-equiv="Content-Type" content ...

  4. 贪心 Codeforces Round #288 (Div. 2) B. Anton and currency you all know

    题目传送门 /* 题意:从前面找一个数字和末尾数字调换使得变成偶数且为最大 贪心:考虑两种情况:1. 有偶数且比末尾数字大(flag标记):2. 有偶数但都比末尾数字小(x位置标记) 仿照别人写的,再 ...

  5. 把文本框嵌入到form

    <form action="/submit-cat-photo"> <input type="text" placeholder=" ...

  6. 斑点检测(LoG,DoG) [上]

    斑点检测(LoG,DoG) [上] 维基百科,LoG,DoG,DoH 在计算机视觉中,斑点检测是指在数字图像中找出和周围区域特性不同的区域,这些特性包括光照或颜色等.一般图像中斑点区域的像素特性相似甚 ...

  7. [数据库]关于MAX()函数的一个坑

    之前写了这么一条sql语句,目的是取出表中itemid最大的那一条数据. SELECT date, MAX(itemid) AS itemid, group FROM mytable GROUP BY ...

  8. [转]linux下svn命令大全

    FROM:http://www.jb51.net/os/RedHat/2461.html 1.将文件checkout到本地目录 svn checkout path(path是服务器上的目录) 例如:s ...

  9. bzoj3083 遥远的国度 题解

    题目大意: 给定一棵有根树,每个点有一个权值,提供三种操作: 1.将x节点变为根节点 2.将x到y路径上的点的权值全部改为v 3.询问x的子树中点权的最小值 思路: 用DFS序剖分,记录每个节点入栈出 ...

  10. [Cocos2D-x For WP8]Tile Map创建地图

    在Cocos2D-x里面创建Tile Map地图是需要用到.tmx的地图文件的,那么创建Tile Map地图文件,我们可以通过地图编辑器来创建,地图编辑器可以在网站:http://www.mapedi ...