拿什么来拯救你,我的table(海玉博客)

2020-04-15 21:47:31易采站长站整理

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

table疑难杂症之换行

用table显示数据有时候会有一个头疼的地方,即不换行显示某段文字,尤其在表头th中用到地方最多。其实你所头疼的并非换行,而是其背后的浏览器兼容加性使得换行的困难程度大大增。这里,你可以查看攻略强制换行与强制不换行这篇文章得到启示,文中详细讨论了在不同情况下攻略换行的方法。

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

常见而又生疏的几个table标签

thead、tfoot以及tbody

这三个标签是所谓xhtml的产物,主要是使您有能力对表格中的行进行分组。当您创建某个表格时,您也许希望拥有一个标题行,一些带有数据的行,以及位于底部的一个总计行。这种划分使浏览器有能力支持独立于表格标题和页脚的表格正文滚动。当长的表格被打印时,表格的表头和页脚可被打印在包含表格数据的每张页面上。个人认为其主要用途适用于超长表格的显示优化。

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

thead标签表示HTML页脚
表格的页脚tfoot,可以使用单独的样式定义页脚(脚注或表注),并且在打印时可以在分页的下部打印页脚。

tbody标签表示HTML表体
浏览器显示表格时,通常是完全下载表格后,再全部显示,所以当表格很长时,可以使用tbody分段显示。

注释:如果您使用 thead、tfoot以及tbody元素,您就必须使用全部的元素。它们的出现次序是:thead、tfoot、tbody,这样浏览器就可以在收到所有数据前就可呈现表头和页脚了。您必须在table元素内部使用这些标签,且thead内部必须拥有tr标签。所以书写更为标准的table方式即如下代码:

复制代码
<table border=”0″ cellspacing=”0″ cellpadding=”0″ width=”100%”>