有时候表格会因为内容多少忽大忽小的很烦人,在网上搜了下解决方案,效果不错哦,给大家分享下!
首先介绍两个利器:
table-layout:fixed //固定表格大小
word-break:break-all;//字符串自动换行
 
注意:IE和firefox是有很大区别的!(我就是栽在这个上面了,⊙﹏⊙b汗)
1. (IE浏览器)使用 table-layout:fixed;强制table的宽度,多余内容隐藏
<table style="table-layout:fixed" width="200">
 
2.(IE浏览器)使用 table-layout:fixed;强制table的宽度,内层td,th采用word-break : break-all;或者word-wrap : break-word ;换行
<table width="200" style="table-layout:fixed;">
<tr>
<td width="25%" style="word-break : break-all; ">abcdefghigklmnopqrstuvwxyz 1234567890
 
3.(Firefox浏览器)连续的英文字符和阿拉伯数字的断行,Firefox的所有版本的没有解决这个问题,我们只有让超出边界的字符隐藏或者,给容器添加滚动条
 
4.(Firefox浏览器)使用 table-layout:fixed;强制table的宽度,内层td,th采用word-break : break-all;或者word-wrap : break-word ;换行,使用overflow:hidden;隐藏超出内容,这里overflow:auto;无法起作用
<table style="table-layout:fixed" width="200">
<tr>
<td width="25%" style="word-break : break-all; overflow:hidden; ">abcdefghigklmnopqrstuvwxyz1234567890</td>

html表格内容自动换行的更多相关文章

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

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

  2. DIV的内容自动换行

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

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

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

  4. php网址显示excel表格内容

    /** * excel表格内容在网页中显示 * * 首先需要下载PHPExcel 工具包 * 网址: http://phpexcel.codeplex.com/releases/view/119187 ...

  5. 转!!Java JTable 根据表格内容 自动调整表格列宽

    //根据表格内容 自动调整列宽http://blog.sina.com.cn/s/blog_5e54d6140100s1d3.html

  6. 使pre的内容自动换行

    <pre> 元素可定义预格式化的文本.被包围在 pre 元素中的文本通常会保留空格和换行符.而文本也会呈现为等宽字体. <pre> 标签的一个常见应用就是用来表示计算机的源代码 ...

  7. [HTML Q&A][转]使pre的内容自动换行

    <pre> 元素可定义预格式化的文本.被包围在 pre 元素中的文本通常会保留空格和换行符.而文本也会呈现为等宽字体. <pre> 标签的一个常见应用就是用来表示计算机的源代码 ...

  8. JXL解析Excel表格内容到数据库

    java中常用的解析Excel表格的工具一种是POI一种是JXL,POI功能强大,相比JXL稍嫌复杂,对表格样式的处理非常好:而JXL解析简单方便,对中文支持比较好. 工作中解析Excel内容上传到数 ...

  9. python读取word表格内容(1)

    1.首页介绍下word表格内容,实例如下: 每两个表格后面是一个合并的单元格

随机推荐

  1. springMVC接收参数 xml/json

    springMVC参数接收 作为web层框架,可以接受复杂的类型,且很简单 1.接收字符串可以直接写参数类型,参数名称,跟前端传过来的name值一样即可 如果不一样也可以,通过@RequestPara ...

  2. hihocoder #1580 : Matrix (DP)

    #1580 : Matrix 时间限制:1000ms 单点时限:1000ms 内存限制:256MB 描述 Once upon a time, there was a little dog YK. On ...

  3. POJ 1741 树分治

    题目链接[http://poj.org/problem?id=1741] 题意: 给出一颗树,然后寻找点对(u,v)&&dis[u][v] < k的对数. 题解: 这是一个很经典 ...

  4. 【BZOJ 3308】 3308: 九月的咖啡店 (费用流|二分图最大权匹配)

    3308: 九月的咖啡店 Time Limit: 30 Sec  Memory Limit: 128 MBSubmit: 244  Solved: 86 Description 深绘里在九份开了一家咖 ...

  5. [ZOJ3254] MON 9.2009Secret Code

    A^x = D (mod P) 0 <= x <= M, here M is a given integer. 1 <= A, P < 2^31, 0 <= D < ...

  6. [BZOJ5306][HAOI2018]染色

    bzoj luogu Description 给一个长度为\(n\)的序列染色,每个位置上可以染\(m\)种颜色.如果染色后出现了\(S\)次的颜色有\(k\)种,那么这次染色就可以获得\(w_k\) ...

  7. 【二分图最大匹配】【匈牙利算法】zoj3988 Prime Set

    题意:给你n个正整数,一对和为素数的数为一个合法数对.你选不超过K个合法数对,使得你选的数对涉及到的数的数量最大化.输出这个值. 所有1之间是可以任意两两配对的. 把奇数放在左侧,偶数放在右侧. 考虑 ...

  8. tarjan算法+缩点--cojs 908. 校园网

    cojs 908. 校园网 ★★   输入文件:schlnet.in   输出文件:schlnet.out   简单对比时间限制:1 s   内存限制:128 MB USACO/schlnet(译 b ...

  9. 某DP题目3

    题意: 一根数轴上有n只怪物,第i个怪物所在的位置为ai,另有m个特殊点,第i个特殊点所在的位置为bi.你可以对怪物进行移动,若两怪物相邻,那么你不能把他们分开,移动时要看作一个整体.你可以选择向左或 ...

  10. zoj 3621 Factorial Problem in Base K 数论 s!后的0个数

    Factorial Problem in Base K Time Limit: 20 Sec  Memory Limit: 256 MB 题目连接 http://acm.zju.edu.cn/onli ...