首先需要在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. 【MyEcplise SVN】myEcplise上安装SVN的多种方式

    第一种:SVN的在线安装 1.打开MyEclipse,找到顶部菜单栏 Help(帮助)-Install from Site-(从网站安装),如下图 2. 然后: 点击Install from Site ...

  2. DSP using MATLAB 示例Example3.9

    用到的性质 上代码: n = 0:100; x = cos(pi*n/2); k = -100:100; w = (pi/100)*k; % freqency between -pi and +pi ...

  3. 【bzoj4513】储能表【数位DP】

    本来是想去学数位DP,作死挑了这道题,爆炸... 听说正确姿势应该是去做bzoj4521[手机],听说迪克们当场都A了,Orz 然后对于4513,我只想说,一.脸.懵.逼 首先,我是无论如何都无法想到 ...

  4. 餐厅系统app7

    团队贡献分 杨子健:23 郭志豪:24 谭宇森:22 刘森松:31

  5. ural 1071. Nikifor 2

    1071. Nikifor 2 Time limit: 1.0 secondMemory limit: 64 MB Nikifor has a number x. He doesn't need it ...

  6. Only Link: Reading links for button/a etc

    When To Use The Button Element: https://css-tricks.com/use-button-element/ The Difference Between An ...

  7. [转]七天学会NodeJS

    转:http://nqdeng.github.io/7-days-nodejs/ NodeJS基础 什么是NodeJS JS是脚本语言,脚本语言都需要一个解析器才能运行.对于写在HTML页面里的JS, ...

  8. gson 简要使用

    http://www.cnblogs.com/chenlhuaf/archive/2011/05/01/gson_test.html 发现了google的gson,因为之前对于protocolbuf有 ...

  9. git 放弃本地某个文件的修改，或所有修改

    18:57 2015/11/17git 放弃本地某个文件的修改,或所有修改git checkout 文件名git checkout // 放弃所有文件的所有修改git reset --hard 版本号 ...

  10. 【ZOJ】1015 Fishing Net

    http://acm.zju.edu.cn/onlinejudge/showProblem.do?problemCode=1015 题意:给出一个n个点的无向图,询问是否为弦图,弦图定义为对于图中任意 ...