遇到一长串字母撑出了td宽度，导致整个表格错乱，如图：

，

解决办法：

第一：

table 加上css: table-layout: fixed;（此css属性 表示 列宽由表格宽度和列宽度设定。不会因为内容而改变设定的宽高，而是会自适应外面的容器）。

第二：

td 加上css: word-wrap: break-word;（此css属性表示  在长单词或 URL 地址内部进行换行）。

效果如图：

设置table中的td一连串内容自动换行的更多相关文章

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

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

  2. table中的td限制宽度width也不能让字符过长变成省略号生效？

    table中的td限制宽度width也不能让字符过长变成省略号生效? http://blog.csdn.net/java_mr_zheng/article/details/49423247 CSS t ...

  3. 【js】将table的每个td的内容自动赋值给其title属性

    <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/ ...

  4. table表格td内内容自动换行

    项目开发时,遇到问题:td内传入数据,全是字母,不会自动换行 一般字母数字/特殊符号的话,会被浏览器默认是一个字符串或者说一个单词,不会自动换行 所以需要设置一下,让表格内容自动换行. 1.给td标签 ...

  5. table中的td内容过长显示为固定长度，多余部分用省略号代替

    如何使td标签中过长的内容只显示为这个td的width的长度,之后的便以省略号代替. 给table中必须设置属性: table-layout: fixed; 然后给 td 设置: white-spac ...

  6. table中的td等长（不随内容大小变化）

    使用的table时候发现td的长度是随着内容的大小而变化的,但是有的时候我们不希望这样.想要td等长可以在 tbale中加上         style=“table-layout:fixed”   ...

  7. jquery获取table,遍历输出tr中各个td的内容（转载）

    首先,依赖jquery.. 1 $('#btntb').click(function(){ 2 $('#tab tr').each(function(i){ // 遍历 tr 3 $(this).ch ...

  8. jquery、js获取table,遍历输出tr中各个td的内容。

    首先,依赖jquery.. $('#btntb').click(function(){ $('#tab tr').each(function(i){ // 遍历 tr $(this).children ...

  9. Jquery Ajax 异步设置Table中某列的值

    可根据table中某列中的ID去改变某列的值! 只是参考,实际应用中不能这样做的,如果有很多行,频繁访问服务器,服务器是顶不住的! JS: $(document).ready(function () ...

随机推荐

  1. 20180831xlVBA_WorksheetsCosolidate

    Sub WorkSheetsConsolidate() Rem 设置求和区域为 单元格区域;单元格区域 Const Setting As String = "A1;B2:C4" D ...

  2. android -------- 解决NDK开发中的 Method 'NewStringUTF' could not be resolved

    创建NDK项目时, .cpp文件中出现错误, Method 'NewStringUTF' could not be resolved 如图: 网上看了很多解决方式 项目右键->属性->c/ ...

  3. Confluence 6 修改导航显示选项

    选择 子页面(Child pages)来在边栏中查看当前页面的子页面. 选择 页面树(Page tree)来查看整个空间的页面树,扩展当前的页面. 你也可以选择是否完全隐藏导航显示选项或者添加你希望可 ...

  4. Myeclipse项目中Source、Projects、Libraries、Order and export含义

    Myeclipse 新建一个项目时,会出现如下界面 输入项目名,点击next Source source folder:存放.java源文件的根目录:output folder:.class编译输出的 ...

  5. Vue之vue自动化工具快速搭建单页项目目录

    1 生成项目目录 使用vue自动化工具可以快速搭建单页应用项目目录. 该工具为现代化的前端开发工作流提供了开箱即用的构建配置.只需几分钟即可创建并启动一个带热重载.保存时静态检查以及可用于生产环境的构 ...

  6. 把javabean复制到另一个javabean 使用BeanUtils.copyProperties(a,b) 复制

    该方法对于两种不同的jar包有两种不同的意义 ,a,b通常是两个结构相似的javabean,注意:a,b里的定义类型名称必须一致才能复制 引用的是org.springframework.beans 则 ...

  7. sqlserver用timestamp帮助解决数据并发冲突 转【转】

    http://blog.csdn.net/u011014032/article/details/42936783 关于并发请求,网上很多朋友都说的很详细了,我就不在这里献丑了.这里只记录下刚刚完工的那 ...

  8. 使用iText快速更新书签

    一.介绍 pdfbox基于Apache协议,商用无需开放源代码. iText基于APGL协议,打包和修改需发布源码,除非花钱买断. 二.用途 下载的电子书,有的书签是FitHeight,也就是缩放后整 ...

  9. 2017-3-30/HTTP协议2

    1. http的状态码有哪些? 状态代码由三位数字组成,第一个数字定义了响应的类别,共分五种类别: 1xx:指示信息--表示请求已接收,继续处理 2xx:成功--表示请求已被成功接收.理解.接受 3x ...

  10. notepad++自动对齐使用空格代替Tab并将空格显示为小点

    一.说明 对大多数语言而言自动对齐使用空格还是tab对编译运行并没有什么影响,但对python问题就很大:因为就算是缩进看起来是一样的但某些行用空格某些行用tab运行会报错. 另外除了空格替换tab外 ...