遇到一长串字母撑出了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. Confluence 6 内容在空间中是如何组织的

    你可以将空间考虑为一个容器,在这个容器中保持了有关你项目中所有重要的东西,包括小组,项目或者项目相关的工作.这些东西有很高的自主性,这表示的是每个空间都有自己的的页面,文件,评论以及 RSS 新闻源. ...

  2. TP5中的小知识

    在TP5中如果想用select 查询后,变成数组,用toArray()这个函数的话,必须在连接数据库中把 数据集返回类型变成 'resultset_type'=>'\think\Collecti ...

  3. genymotio安装apk包提示 ...abi ...cpu

    下载 Genymotion-ARM-Translation_v1.1 (1).zip 地址:http://qc1.androidfilehost.com/dl/Q-YDDKt4QaFNvKh62ppO ...

  4. 移动端自动化测试-Mac-IOS-Appium环境搭建

    第一步 安装JDK,本机如果带有1.7及以上版本的,则可忽略此安装步骤. 百度下载JDK,并配置环境变量 vim ~/.bash_profile 检查是否安装成功 java -version 第二步 ...

  5. python theading线程开发与加锁、信号量、事件等详解

    线程有2种调用方式,如下: 直接调用 import threading import time def sayhi(num): #定义每个线程要运行的函数 print("running on ...

  6. php打印

    function preview() { bdhtml = window.document.body.innerHTML; sprnstr = "<!--startprint--> ...

  7. java中equals与==的比较

    总结来说: 1)对于==,如果作用于基本数据类型的变量,则直接比较其存储的 “值”是否相等: 如果作用于引用类型的变量,则比较的是所指向的对象的地址 2)对于equals方法,注意:equals方法不 ...

  8. 剑指offer-调整数组内奇偶数顺序

    题目描述 输入一个整数数组,实现一个函数来调整该数组中数字的顺序,使得所有的奇数位于数组的前半部分,所有的偶数位于位于数组的后半部分,并保证奇数和奇数,偶数和偶数之间的相对位置不变. 解题思路 时间换 ...

  9. Rail_UVa514_栈

    /* https://vjudge.net/problem/UVA-514 */ #include "pch.h" #include<iostream> #includ ...

  10. shell历史简介

    shell也叫做终端.命令行. shell的基本作用是供用户输入命令.解析用户所输入命令.呈现命令执行结果. shell有多种不同的shell其语法会有差异,这也是严谨的sh文件会在首行以“#!/bi ...