有时候表格会因为内容多少忽大忽小的很烦人,在网上搜了下解决方案,效果不错哦,给大家分享下!
首先介绍两个利器:
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. google::proto::message.h

    整了一阵子google  proto message.h, 遇到很多问题,各种百度.google ,估计是用的人不是很多,整的焦头烂额,很多API都不知道该怎么用,只能一点一点的扣,为了方便在这里先简 ...

  2. LaTex 小技巧

    首行缩进 参考:小技巧之--首行缩进 %-------------------------------------------------------------------------------- ...

  3. /.nav-tabs :是普通标签页 .nav-pills:胶囊式标签页 action ;默认的激活项,给<li>加默认显示的是哪个标签页内容 .nav是标签页的一个基类,给ul加 .nav-stacked: 垂直排列BootStrap

    <meta name="viewport" content="with=device-width, initial-scale=1, user-scalabe=no ...

  4. 【BZOJ 1880】 [Sdoi2009]Elaxia的路线 (最短路树)

    1880: [Sdoi2009]Elaxia的路线 Description 最近,Elaxia和w**的关系特别好,他们很想整天在一起,但是大学的学习太紧张了,他们 必须合理地安排两个人在一起的时间. ...

  5. 我的OI生涯 第七章 终篇

    11.10日. 我们TSOI再次来到了熟悉的燕山大学,只不过这次是真刀真枪的干了. 望着那座熟悉的小桥,身边的好友不知此行过后还有多少. 下午才到,出人意外的是这次没有住燕大宾馆而是选择了熟悉的格林豪 ...

  6. bzoj 3931: [CQOI2015]网络吞吐量 -- 最短路+网络流

    3931: [CQOI2015]网络吞吐量 Time Limit: 10 Sec  Memory Limit: 512 MB Description 路由是指通过计算机网络把信息从源地址传输到目的地址 ...

  7. bzoj 1715: [Usaco2006 Dec]Wormholes 虫洞 -- spfa判断负环

    1715: [Usaco2006 Dec]Wormholes 虫洞 Time Limit: 5 Sec  Memory Limit: 64 MB 注意第一次加边是双向边第二次是单向边,并且每次询问前数 ...

  8. Djangio笔记

    django图解 新创建一个项目后的目录层级

  9. [转]Android x86模拟器Intel Atom x86 System Image配置与使用方法

    Android x86模拟器Intel Atom x86 System Image配置与使用方法 前言: 大家现在开发使用的Android 模拟器模拟的是 ARM 的体系结构(arm-eabi),因此 ...

  10. JQ 使用模板

    1.首先需要添加模板JS文件,