遇到一长串字母撑出了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. LeetCode--443--压缩字符串(未看)

    问题描述: 给定一组字符,使用原地算法将其压缩. 压缩后的长度必须始终小于或等于原数组长度. 数组的每个元素应该是长度为1 的字符(不是 int 整数类型). 在完成原地修改输入数组后,返回数组的新长 ...

  2. 10 Node Frameworks to Use in 2019

    原文 https://scotch.io/bar-talk/10-node-frameworks-to-use-in-2019 node Framworks列表: http://nodeframewo ...

  3. mysql之filesort原理

    在执行计划中,可能经常看到有Extra列有filesort,这就是使用了文件排序,这当然是不好的,应该优化,但是,了解一下他排序的原理也许很有帮助,下面看一下filesort的过程: 1.根据表的索引 ...

  4. Sphinx实时索引

    数据库中的数据很大,然后我有些新的数据后来加入到数据库中,也希望能够检索到,全部重新建立索引很消耗资源,这样需要用到“主索引+增量索引”的思路来解决,这个模式实现的基本原理是设置两个数据源和两个索引. ...

  5. CentOS7.3环境下源码安装httpd

    CentOS7.3环境下源码安装httpd 本文在CentOS7.3下,源码安装apache服务httpd2.4. 1.下载好源码安装包 [root@localhost ~]#ll total 625 ...

  6. FileZilla 客户端连接 FlieZilla 服务器 连接成功读取目录列表却失败的解决办法

    解决过程: 第一步: 第二步:

  7. Web测试要点

    由于本人工作接触Web测试,所以我从网上找的资料,学习了解web测试哪些内容,然后自己整理汇总的随笔,如文章中有不足的地方,请大家多多指教:或者文章内容与他人相似,望见谅.   web是什么?(转载: ...

  8. 【Java】【4】关于Java中的自增自减

    摘要:理解j = j++与j = ++j的区别:正确用法:直接用j++,不要用前两种 正文: import java.util.*; public class Test{ public static ...

  9. Leetcode 969. 煎饼排序

    969. 煎饼排序  显示英文描述 我的提交返回竞赛   用户通过次数134 用户尝试次数158 通过次数135 提交次数256 题目难度Medium 给定数组 A,我们可以对其进行煎饼翻转:我们选择 ...

  10. 不安装Oracle数据库使用plsqldevloper

    1.Oracle官网下载instantclient 解压到D:\zl\instantclient_11_2 2.配置环境变量 ORACLE_HOME = D:\zl\instantclient_11_ ...