`

(转)关于在<td>中显示文本的自动截断

阅读更多


 <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>无标题文档</title>
<style>
table
{
 table-layout:fixed;
}
td
{
 text-overflow:ellipsis;
 white-space:nowrap;
 overflow:hidden;
}
</style>
</head>

<body>
<table width="100%" border="1" class="xTable">
  <tr>
    <td width="100">col_1</td>
    <td>col_2</td>
    <td width="120">col_3</td>
    <td width="100">col_4</td>
  </tr>
  <tr>
    <td>abcdefg</td>
    <td>a b c d e f g h i j k l m n o p q r s t u v w x y z a b c d e f g h i j k l m n o p q r s t u v w x y z a b c d e f g h i j k l m n o p q r s t u v w x y z a b c d e f g h i j k l m n o p q r s t u v w x y z</td>
    <td>abcdefg</td>
    <td>abcdefg</td>
  </tr>
</table>
</body>
</html>

 

 未添加截断字符串样式前:

 添加截断字符串样式后:



 (转自:http://0123.blog.163.com/blog/static/478831200910275422865/)

  • 大小: 18.1 KB
  • 大小: 10.5 KB
分享到:
评论

相关推荐

    获取网页表格数据 正则表达式

    获取网页表格数据 &lt;tr&gt; &lt;td&gt;正则表达式 获取网页表格数据 &lt;tr&gt; &lt;td&gt;正则表达式

    html表格<table></table>

    &lt;td rowspan="2"&gt; &lt;/td&gt; &lt;td&gt; 第二行的单元格 &lt;/td&gt; &lt;td&gt; 第三行的单元格 &lt;/td&gt; &lt;/tr&gt; &lt;tr &gt; &lt;td colspan="2" align="center"&gt; 第二行的单元格 &lt;/td&gt; &lt;/tr&gt; &lt;tr &gt; &lt;td&gt; 第一行...

    使用HTML开发商业网站-创建表格课件.pptx

    定义表格中的一行,嵌套在&lt;table&gt;&lt;/table&gt;中 定义表格中的单元格,嵌套在&lt;tr&gt;&lt;/tr&gt;中 创建table表格,离不开以下3对标签: 表格 &lt;!doctype html&gt; &lt;html&gt; &lt;head&gt; &lt;meta charset="utf-8"&gt; &lt;title&gt;表格 &lt;/title&gt; &lt;/head&gt;...

    购物车代码

    .println("&lt;table align='center'&gt;&lt;tr&gt;&lt;th&gt;图片&lt;/th&gt;&lt;th&gt;产品名称&lt;/th&gt;&lt;th&gt;产品价格&lt;/th&gt;&lt;th colspan=2&gt;操作&lt;/th&gt;&lt;/tr&gt;"); try { DBaccess db = new DBaccess(); ArrayList&lt;Goods&gt; goods = db.Search...

    双表头固定代码

    &lt;td&gt;body c&lt;/td&gt; &lt;br&gt; &lt;td&gt;body d&lt;/td&gt; &lt;br&gt; &lt;/tr&gt; &lt;br&gt; &lt;tr&gt; &lt;br&gt; &lt;td&gt;body a&lt;/td&gt; &lt;br&gt; &lt;td&gt;body b&lt;/td&gt; &lt;br&gt; &lt;/tr&gt; &lt;br&gt; &lt;tr&gt; &lt;br&gt; &lt;td&gt;body c&lt;/td&gt; &lt;br&gt; &lt;td&gt;body d&lt;/td&gt; &lt;br&gt; &lt;/tr&gt; &lt;br&gt; &lt;tr&gt; &lt;br&gt; &lt;td&gt;body a...

    ajax实例大全 很实用的!

    &lt;tr&gt;&lt;td&gt;&lt;a href="2.1/index.jsp"&gt;2.1无刷新显示回帖&lt;/a&gt;&lt;/td&gt;&lt;/tr&gt; &lt;tr&gt;&lt;td&gt;&lt;a href="2.2/suggest.html"&gt;2.2输入内容前提示&lt;/a&gt;&lt;/td&gt;&lt;/tr&gt; &lt;tr&gt;&lt;td&gt;&lt;a href="2.3/upload.html"&gt;2.3带进度的文件上传&lt;/a&gt;&lt;/td&gt;&lt;/tr&gt; ...

    JSP图书管理系统

    &lt;td height="33" colspan="3" valign="middle" bgcolor="#F7F7F7"&gt;&lt;span style="font-size: medium"&gt;新进图书&lt;/span&gt;&lt;/td&gt; &lt;/tr&gt; &lt;tr&gt; &lt;td height="10"&gt;&lt;/td&gt; &lt;td&gt;&lt;/td&gt; &lt;td&gt;&lt;/td&gt; &lt;/tr&gt; &lt;tr&gt; &lt;td height=...

    jsp代码问题

    value="元朝"/&gt;元朝&lt;/td&gt;&lt;/tr&gt;&lt;tr&gt;&lt;td&gt; &lt;/td&gt;&lt;/tr&gt;&lt;tr&gt;&lt;td&gt;题目2:&lt;/td&gt;&lt;td colSpan="3"&gt;字母a后边的字母为&lt;/td&gt;&lt;/tr&gt;&lt;tr&gt;&lt;td&gt;&lt;/td&gt;&lt;td&gt;&lt;input type="radio" name="num2" value="c" checked="checked"/&gt;c&lt;/td&gt;&lt;td&gt;...

    圆角表格代码

    &lt;TD&gt; &lt;TABLE fixed" height=3 cellSpacing=0 cellPadding=0 width="100%" border=0&gt; &lt;TBODY&gt; &lt;TR height=1&gt; &lt;TD width=1&gt;&lt;/TD&gt; &lt;TD width=1&gt;&lt;/TD&gt; &lt;TD width=1&gt;&lt;/TD&gt; &lt;TD bgColor=#908a47&gt;&lt;/TD&gt; &lt;TD width=...

    asp.net超强模板引擎

    #foreach($u in $ListUsers) ... &lt;td&gt;昵称&lt;/td&gt; &lt;td&gt;性别&lt;/td&gt; &lt;td&gt;城市&lt;/td&gt; &lt;/tr&gt; #each &lt;tr&gt; &lt;td&gt;$u.Name&lt;/td&gt; &lt;td&gt;$u.Sex&lt;/td&gt; &lt;td&gt;$u.City&lt;/td&gt; &lt;/tr&gt; #afterall &lt;/table&gt; #nodata 暂无用户资料 #end

    自适应PC手机端的C3 jQuery可编辑表格代码.zip

    代码片段: &lt;table class="table table-bordered table-hover"&gt; &lt;tr class="info"&gt; ...&lt;td colspan="5" class="danger"&gt;&lt;button class="btn btn-primary btn-sm"&gt;增加&lt;/button&gt;&lt;/td&gt; &lt;/tr&gt; &lt;/table&gt;

    通用代码下一页

    &lt;td &gt;${item.gsName }&lt;/td&gt; &lt;td &gt;${item.gsClass }&lt;/td&gt; &lt;td &gt;${item.gsBrand }&lt;/td&gt; &lt;td &gt;${item.placeOrigin }&lt;/td&gt; &lt;td &gt;${item.gsWeight }&lt;/td&gt; &lt;td &gt;${item.unitPrice }&lt;/td&gt; &lt;td &gt; &lt;button 购买&lt;/...

    学生信息管理系统

    &lt;td&gt;&lt;input type="text" name="id"&gt;&lt;/td&gt; &lt;/tr&gt; &lt;tr&gt; &lt;td&gt;姓名&lt;/td&gt; &lt;td&gt;&lt;input type="text" name="name"&gt;&lt;/td&gt; &lt;/tr&gt; &lt;tr&gt; &lt;td&gt;性别&lt;/td&gt; &lt;td&gt;&lt;input type="text" name="sex"&gt;&lt;/td&gt; &lt;/tr&gt; &lt;tr&gt; &lt;td&gt;...

    JSP+购物车源代码

    &lt;tr height="38"&gt;&lt;td&gt;商品名称&lt;/td&gt;&lt;td&gt;单价&lt;/td&gt;&lt;td&gt;数量&lt;/td&gt;&lt;td&gt;总价&lt;/td&gt;&lt;td&gt;操作&lt;/td&gt;&lt;/tr&gt; &lt;% ArrayList&lt;Shop&gt; list = (ArrayList&lt;Shop&gt;)session.getAttribute(ISysConstans.CARNAME); if(list!...

    电子商务开发技术报告模板

    请仔细参阅, &lt;td &gt;&lt;%=s_hit%&gt;&lt;/td&gt; &lt;td &gt;&lt;%=s_renum%&gt;&lt;/td&gt; &lt;td&gt;&lt;%=s_subject%&gt;&lt;/a&gt;&lt;/td&gt; &lt;td &gt;&lt;%=s_context%&gt;&lt;/td&gt; &lt;td &gt;&lt;%=s_author%&gt;&lt;/td&gt; &lt;td &gt;&lt;%=s_date1%&gt;&lt;/td&gt; &lt;td &gt;&lt;a &gt;"&gt;删除主题&lt;/a&gt;&lt;/td&gt; &lt;td &gt;...

    Android代码-ColorSeekBar

    &lt;td&gt;app:colorSeeds="@array/colors"&lt;/td&gt; &lt;td&gt;Set the colors of seekbar&lt;/td&gt; &lt;/tr&gt; &lt;tr&gt; &lt;td&gt;app:cornerRadius="4dp"&lt;/td&gt; &lt;td&gt;Sets the corner radius of bar.&lt;/td&gt; &lt;/tr&gt; &lt;tr&gt; &lt;td&gt;app:barHeig

    MVC实现增删改查的小例子

    &lt;td&gt;&lt;center&gt;操 作&lt;/center&gt;&lt;/td&gt; &lt;/tr&gt; &lt;jsp:useBean id="sBean" class="com.jq92.bean.SqlBean"/&gt; &lt;jsp:useBean id="jBean" class="com.jq92.bean.JavaBean"/&gt; &lt;% String sql="select * from student order...

    在线订餐系统基于Javawen

    &lt;td valign="top" rowspan="2"&gt;&lt;c:import url="BodyLeft.jsp"&gt;&lt;/c:import&gt;&lt;/td&gt; &lt;td&gt;&lt;c:import url="BodyInnerTop.jsp"&gt;&lt;/c:import&gt;&lt;/td&gt; &lt;/tr&gt; &lt;tr&gt; &lt;td&gt; &lt;!-- 显示内容开始 --&gt; &lt;h3 align="center"&gt;我学我...

    HTML5基础知识-HTML5表格与列表.pptx

    行 列 1 &lt;table border=”1”&gt; &lt;/table&gt; 表格 &lt;tr&gt; &lt;/tr&gt; 数据行 &lt;td&gt;张三&lt;/td&gt; &lt;td&gt; 男 &lt;/td&gt; &lt;td&gt; 19 &lt;/td&gt; ...该属性可以用在&lt;table&gt;、 &lt;tr&gt;、 &lt;td&gt;、&lt;th&gt;元素中 ...如果在&lt;table&gt;中和&lt;tr&gt;中同时设置了背景色,

    extjs4 模板值和模板

    '&lt;tr&gt;&lt;td width=90&gt;姓名&lt;/td&gt;&lt;td width=90&gt;{0}&lt;/td&gt;&lt;/tr&gt;', '&lt;tr&gt;&lt;td&gt;年龄&lt;/td&gt;&lt;td&gt;{1}&lt;/td&gt;&lt;/tr&gt;', '&lt;tr&gt;&lt;td&gt;性别&lt;/td&gt;&lt;td&gt;{2}&lt;/td&gt;&lt;/tr&gt;', '&lt;/table&gt;' ) //模板值和模板进行组合并将新生成的节点插入到id...

Global site tag (gtag.js) - Google Analytics