首先需要在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. Pig用户自定义函数（UDF）转

    原文地址:http://blog.csdn.net/zythy/article/details/18326693 我们以气温统计和词频统计为例,讲解以下三种用户自定义函数. 用户自定义函数 什么时候需 ...

  2. vmstat的使用（查看系统各种负载）

    $ vmstatprocs -----------memory---------- ---swap-- -----io---- --system-- -----cpu------ r b swpd f ...

  3. JVM性能监控工具-Jvisualvm

    用法:Jvisualvm是JDK自带的一款性能分析工具 使用方式: 1.配置好JDK环境变量 1.本地JVM监控略 2.远程JVM监控 用JMX对Resin内存状态进行监控 ,可以看到本地所有可监控的 ...

  4. vim 分屏功能

    分屏启动Vim 使用大写的O参数来垂直分屏. vim -On file1 file2 ... 使用小写的o参数来水平分屏. vim -on file1 file2 ... 注释: n是数字,表示分成几 ...

  5. iOS学习31之UITableVIewCell自定义

    1. 自定义Cell 1> 为什么要自定义Cell UITableView 中系统的Cell共提供了四种默认样式,  分别是: UITableViewCellStyleDefault UITab ...

  6. H

    很爽的一局,打了70分钟,还刷新了我的最高击杀记录.打完出来一看居然是H局,第一次在H局里打出不错的表现诶.好像找人说一说,可惜并没有谁听,以前的朋友也不在了,还是算了,自己心里慢慢发霉去吧. 这局末 ...

  7. BZOJ2164 : 采矿

    树链剖分+线段树,每个节点维护以下信息: (1)单独在某个点分配$i$个人的最大收益.可以$O(m)$合并. (2)分配$i$个人的最大收益.可以用$O(m^2)$合并. 时间复杂度$O(c(m^2\ ...

  8. 【BZOJ1864】[Zjoi2006]三色二叉树 树形DP

    1864: [Zjoi2006]三色二叉树 Description Input 仅有一行,不超过500000个字符,表示一个二叉树序列. Output 输出文件也只有一行,包含两个数,依次表示最多和最 ...

  9. HDU 4405 (概率DP)

    题目链接: http://acm.hdu.edu.cn/showproblem.php?pid=4405 题目大意:飞行棋.如果格子不是飞行点,扔骰子前进.否则直接飞到目标点.每个格子是唯一的飞行起点 ...

  10. 【NOI2016】区间 题解

    题目大意: 有n个区间,当有m个区间有公共部分时,求m个区间长度的最大值与最小值之差的最小值. 思路: 按区间的长度从小到大排序,可知连续的几个区间最优,则用两个指针指其头尾,线性扫描,再用线段树区间 ...