深入解析HTML的table表格标签与相关的换行问题

何为table：

table者Html表格也，数据之载体。下⾯是⼀个⽐较标准的table代码写法：XML/HTML Code复制内容到剪贴板

1.

3.

7.

简单的HTML表格由table元素以及⼀个或多个tr、th或td元素组成。tr元素定义表格⾏，th元素定义表头的单元格，td元素定义表格单元格。border属性规定表格边框的宽度，cellpadding规定单元边沿与其内容之间的空⽩，cellspacing规定单元格之间的空⽩，这三个属性我们⼀般⼿动设置为0避免浏览器差异。width属性规定表格的宽度，因为table宽度是随内部元素的宽度撑起多少⽽变化，⽽常⽤情况下我们希望table是同外部容器等宽，所以常常默认设置100%宽度使之撑满容器。

不得不说的table-layout:fixed属性table-layout: auto（默认）|fixed。参数：

auto：默认的⾃动算法。布局将基于各单元格的内容。表格在每⼀单元格读取计算之后才会显⽰出来，速度很慢。

fixed：固定布局的算法。在这算法中，⽔平布局是仅仅基于表格的宽度，表格边框的宽度，单元格间距，列的宽度，⽽和表格内容⽆关。 解析速度快。fixed布局模型的⼯作步骤：

1.width属性值不是auto的所有列元素会根据width值设置该列的宽度。

2.表⾸⾏中位于该列的单元格width，根据该单元格宽度设置此列的宽度。如果这个单元格跨多列，则宽度在这些列上平均分配。

3.在以上两步之后，如果列的宽度仍为auto，会⾃动确定其⼤⼩，使其宽度尽可能相等。此时，表的宽度设置为表的width值或列宽度之和(取其中较⼤者)。如果表度度⼤于其列宽总和，将⼆者之差除以列数，再把得到的这个宽度增加到每⼀列上。这种⽅法的速度很快，因为所有列宽都由表的第⼀⾏定义。⾸⾏后所有⾏中的单元格都根据⾸⾏所定义的列宽确定⼤⼩。后⾯这些⾏中的单元格不会改变列宽。这意味着为这些单元格指定的width值都会被忽略。

⼀般在做复杂表格html的时候，有时候你会发现，⽆论怎么调整第⼀⾏每列的width，列宽还是会发⽣出乎于你意料之外的变动（例如⼀长串英⽂⽂本，并且中间⽆空格分隔的情况你要这列限定宽度，使得过长⽂字强制换⾏且不撑破表格，⽽往往结果是怎么也调整不到合适的宽度），这个时候在万般⽆奈之下，你可以使⽤table-layout:fixed。

常见⽽⼜⽣疏的⼏个table标签thead、tfoot以及tbody

这三个标签是所谓xhtml的产物，主要是使您有能⼒对表格中的⾏进⾏分组。当您创建某个表格时，您也许希望拥有⼀个标题⾏，⼀些带有数据的⾏，以及位于底部的⼀个总计⾏。这种划分使浏览器有能⼒⽀持独⽴于表格标题和页脚的表格正⽂滚动。当长的表格被打印时，表格的表头和页脚可被打印在包含表格数据的每张页⾯上。个⼈认为其主要⽤途适⽤于超长表格的显⽰优化。

thead标签表⽰HTML表头

表格的头部thead，可以使⽤单独的样式定义表头，并且在打印时可以在分页的上部打印表头。thead标签表⽰HTML页脚

表格的页脚tfoot，可以使⽤单独的样式定义页脚（脚注或表注），并且在打印时可以在分页的下部打印页脚。tbody标签表⽰HTML表体

浏览器显⽰表格时，通常是完全下载表格后，再全部显⽰，所以当表格很长时，可以使⽤tbody分段显⽰。

注释：如果您使⽤ thead、tfoot以及tbody元素，您就必须使⽤全部的元素。它们的出现次序是：thead、tfoot、tbody，这样浏览器就可以在收到所有数据前就可呈现表头和页脚了。您必须在table元素内部使⽤这些标签，且thead内部必须拥有tr标签。所以书写更为标准的table⽅式即如下代码：XML/HTML Code复制内容到剪贴板

1.

2.

4.

10.

16.

个⼈认为这个东西挺鸡肋，取之⽆⽤，弃之可惜。⼩项⽬可以增加些语义化，但因为曾经遇到过有多个不同表头在同⼀表格显⽰的窘境，限制了⽇后的开发，所以正式项⽬从可扩展的⾓度来说情慎⽤这些标签。

col和colgroup

这俩标签也是xhtml的产物，功能强⼤，兼容奇差。col标签为表格中⼀个或多个列定义属性值。

colgroup标签⽤于对表格中的列进⾏组合，以便对其进⾏格式化。

它们的作⽤主要就是来控制单元格的宽度了，这样省去单独定义每个单元格的⿇烦，过去我们往往是在第⼀⾏中的th或者td上定义宽度来规定每列的宽度，⽽col不但可以定义宽度还能同时定义其他的属性，例如可以通过col来控制⼏列宽度的总和，还可以控制这列的背景⾊。但理想是丰满的，现实是⾻⼲的，正如前⾯所说，功能越⼤不代表其兼容性也越强，据现有的测试下来，col和colgroup能发挥作⽤还能保证兼容的应⽤就只有俩：width和background。对于width，个⼈宁愿使⽤常规⽅式，第⼀⾏设置宽度，保证列宽。对于bacground，⼀般实际中表格⼤⾯积使⽤不同背景的情况也很少见。故个⼈认为：能不⽤尽量不⽤。

何处⽤table

个⼈认为，在⼀个放置数据⾮常密集且⼜⾮常序列化的⼀个容器⾥，⽤table准没错。最常见的例⼦就是我们常见的购物订单结算页⾯，上⾯列有你订单详情：商品名称、单价、购买数量、⾦额⼩计、运费等等，最后最下⽅还会有⼀个最终订单⾦额的结果，table在这⾥可谓是如鱼得⽔，达到了数据之载体的神效。

table疑难杂症之换⾏

⽤table显⽰数据有时候会有⼀个头疼的地⽅，即不换⾏显⽰某段⽂字，尤其在表头th中⽤到地⽅最多。其实你所头疼的并⾮换⾏，⽽是其背后的浏览器兼容加性使得换⾏的困难程度⼤⼤增。

总体来说在table中换⾏个⼈⽐较推荐的⽅式为：先为table设定table-layout:fixed，基本上设定完这个属性后基本的换⾏问题都能够解决⽽不会出现table中td,th因为⾥⾯各个内容的多寡发⽣抢夺其他td,th宽度的情形发⽣。这时如果你依旧有强制换⾏问题，那么在此td中内部加⼀层div，再利⽤word-wrap:break-word; word-break:break-all;这俩个CSS⽅法可以解决换⾏的问题。

攻略强制换⾏与强制不换⾏

强制换⾏与强制不换⾏问题曾经⼀度困扰着我，每当遇到换⾏问题时候那就是痛苦回忆的开始，现在终于痛定思痛，⼀⿎作⽓把这个长期顽固问题给解决。强制换⾏与强制不换⾏⽤到的属性

我们⼀般控制换⾏所⽤到的CSS属性⼀共有三个：word-wrap; word-break; white-space。这三个属性可以说是专为了⽂字断⾏⽽创造出来的。⾸先我们得知道这三个属性到底是做什么⽤地：

word-wrap语法

word-wrap: normal(默认) | break-word各个浏览器均能识别参数：

normal: 允许内容顶开指定的容器边界。

break-word: 内容将在边界内换⾏。必要时会触发word-break（注意：请分辨清楚word-break和break-word这俩个是不同的东西，⼀为属性另为参数）。

说明：

word-wrap是控制是否“为词断⾏”的，设置或检索当前⾏超过指定容器的边界时是否断开转⾏。中⽂没有任何问题，英⽂语句也没问题。但是对于长串的英⽂，就不起作⽤。范例：

congratulation这个单词属于长串英⽂，word-wrap:break-word整个单词看成⼀个整体，如果该⾏末端宽度不够显⽰整个单词，它会⾃动把整个单词放到下⼀⾏，⽽不会把单词截断，这就是对于长串⽂字不起作⽤的解释。word-wrap:normal是默认情况，英⽂单词不被拆开。结论：

作⽤范围仅为div这类标准块级元素，th,td这类table元素虽然识别但是没有效果（如果为td,th加上宽度word-wrap在IE下是能够发挥效果的，但根据完全兼容性⽅便记忆⾓度上来说还是以前⾯的结论为准）。

word-break语法

word-break: normal(默认) | break-all | keep-all参数：

normal: 依照亚洲语⾔和⾮亚洲语⾔的⽂本规则，允许在字内换⾏。

break-all: 该⾏为与亚洲语⾔的normal相同。也允许⾮亚洲语⾔⽂本⾏的任意字内断开。该值适合包含⼀些⾮亚洲⽂本的亚洲⽂本。

keep-all: 与所有⾮亚洲语⾔的normal相同。对于中⽂，韩⽂，⽇⽂，不允许字断开。适合包含少量亚洲⽂本的⾮亚洲⽂本。说明：

word-break:break-all，是断开单词。在单词到边界时，下个字母⾃动到下⼀⾏。主要解决了长串英⽂的问题（恰恰弥补了上⾯word-wrap:break-word对于长串⽂字不起作⽤的缺陷）。范例：

继续以上⾯congratulation这个单词属于长串英⽂，word-break:break-all它会把单词截断，该⾏末端就会变成类似conra(congratulation的前端部分)，下⼀⾏为tulation（conguatulation）的后端部分了。

word-break:keep-all，是指Chinese, Japanese, and Korean不断词。即只⽤此时，不⽤word-wrap，中⽂就不会换⾏了。（英⽂语句正常。）结论：

作⽤范围仅为div这类标准块级元素，th,td这类table元素虽然识别但是没有效果（经测试Chrome下word-break:break-all是有效果的，但根据完全兼容性⽅便记忆⾓度上来说还是以前⾯的结论为准）。Firefox,Opera是⽆法识别word-break的，更不⽤提Firefox下的th,td中使⽤word-break的效果了。

white-space语法

white-space: normal(默认) | pre | nowrap参数：

normal: 默认。空⽩会被浏览器忽略。

pre: 空⽩会被浏览器保留。其⾏为⽅式类似HTML中的pre标签。

nowrap: ⽂本不会换⾏，⽂本会在在同⼀⾏上继续，直到遇到br标签为⽌。说明：

对于pre属性，其实就是HTML中连续的多个空⽩符会被合并，然后为了不让他合并（最常⽤的场合就是表⽰代码⽂字缩进）让其中的空⽩符继续保留⽽不需要我们增加额外的样式和标签来控制它的缩进和换⾏。pre标签的原理也是⼀样的内部默认有了个white-space:pre。

对于nowrap属性，这个是强制不换⾏核⼼，⼀般强制不换⾏就是利⽤这个属性。Firefox的div和td中，以及IE的div中，均没有问题。唯⼀的瑕疵就是在IE的td中会有⼀个问题，如果td没有指定宽度，则nowrap仍然有效，如果td有宽度，并且⽂字中⽆标点、⽆空格（例如中⽂长串⽂字），nowrap则不再有效。解决⽅式就是可以加word-break:keep-all;可以解决此问题。

总结强制换⾏：

如果在div这类标准块级元素中需要强制换⾏，最普遍的⽅案那就是word-wrap:break-word; word-break:break-all;此⽅式的缺点就是会导致如果恰巧该⾏末端宽为⼀个长串英⽂单词，那么该单词会被撕开的尴尬样式(⽽且FF不识别word-break，反⽽不会撕开这个单词)。个⼈认为如果你这个div⾥⾯放的类似于URL这个长串地址，那么⽤此⽅案是⾮常不错的选择（注意：由于FF不识别word-break，所以⽆法保证每⾏末端会整齐的断开URL单词，但这也是⽆奈的选择）。如果不是放置URL这类可以断开的长串英⽂，⽽是英⽂句⼦的话，那么使⽤word-wrap:break-word;即可。⾄于⽹上看到有word-wrap:break-word;overflow:hidden;这么个写法，据说可以兼容IE和FF，但经过亲⾃测试似乎没有什么特别效果。

总结强制不换⾏：

强制不换⾏的问题到是⽐较容易分析的，就如上⾯所讨论的那样使⽤white-space:nowrap，Firefox的div和td中，以及IE的div中，均没有问题。唯⼀的瑕疵就是在IE的td中会有⼀个问题，如果td没有指定宽度，则nowrap仍然有效，如果td有宽度，并且⽂字中⽆标点、⽆空格（例如中⽂长串⽂字），nowrap则不再有效。解决⽅式就是可以加word-break:keep-all;可以解决此问题。综合下来，⽐较稳妥的⽅式是在⽂字与td之间再套⼀层div，然后使⽤nowrap，那么就是强制不换⾏。注意这时候很有可能⽂字会过多导致溢出容器，所以你还得加⼀个overflow:hidden，防⽌溢出容器，这样⼦就可以兼容各个浏览器了。

总结了那么多，发觉似乎也就那⼏个属性在浏览器⾥⾯的各种兼容性的平衡，现在似乎尚未有⼀个完美的⽅案可以全部兼容各个浏览器，我们所能做的最多的就是尽可能的保持个浏览器显⽰⼀致。如果你还是觉得⼀定要兼容所有的浏览器，那么最后的

⽅案那么就是动⽤JS了，以后的⽂章中我会考虑从以最⼩的JS代价来满⾜此要求，但这暂不在本⽂所讨论的范围内。