今天遇到一个小bug，是关于table中thead,tbody,tfoot的兼容问题：

在开发的时候为了方便写样式，我就把表格的标题部分关于th的内容放在了thead中，当然了，我也没有写tbody和tfoot，此时，检查兼容的时候问题随之而来：

　　在IE，Chrome，Opera下都没问题，但是在Firefox中出现了一个问题，下面tr的内容统一向上走了一个tr，最后一个tr的内容变为空了，与thead的内容重合，我首先想到的是我没有浮动啊，什么情况。随后我检查了下元素，将thead改为tr，问题解决。

　　随后我搜了下thead兼容问题，W3C的解释是：

　　注释：如果您使用 thead、tfoot 以及 tbody 元素，您就必须使用全部的元素。它们的出现次序是：thead、tfoot、tbody，这样浏览器就可以在收到所有数据前呈现页脚了。您必须在 table 元素内部使用这些标签。<thead> 内部必须拥有 <tr> 标签！

　　提示：在默认情况下这些元素不会影响到表格的布局。不过，您可以使用 CSS 使这些元素改变表格的外观。<thead>、<tbody> 以及 <tfoot> 很少被使用，这是因为糟糕的浏览器支持。我们期望在 XHTML 的未来版本中这种情况会发生变化。假如您使用 Internet Explorer 5.0 或更新的浏览器，可以在我们的 XML 教程中查看一个例子。

　　最后自己总结下：thead,tbody,tfoot尽量不用了，如果要用就全部用上且记得把tr写在thead中；

table之thead兼容的更多相关文章

  1. Html table、thead、tr、th、td 标签

    Html table.thead.tr.th.td 标签 案例一 <!-- table 表格标签,配置表格使用.border="1" 添加表格框架 --> <ta ...

  2. 网页制作中在头部固定悬浮table表头(thead)的方法

    这两天接了一个需求,页面是这样的 然后需求是页面中的这个表格当页面向上滚动,且表格的表头到达窗口上方时,表头悬浮在页面的上方,表格正常滚动,这样表格内的数据可以随时看到表头内容. 一开始我认为这是极简 ...

  3. table 的thead th 固定 tbody滚动例子

    <!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8" ...

  4. table表头thead固定

    <html> <head> <meta charset="utf-8"/> <script type="text/javascr ...

  5. table的thead,tbody,tfoot

    为了让大表格(table)在下载的时候可以分段的显示,就是说在浏览器解析HTML时,table是作为一个整体解释的,使用tbody可以优化显示. 如果表格很长,用tbody分段,可以一部分一部分地显示 ...

  6. JS读取XML文件数据并以table显示数据(兼容IE火狐)

    先看xml文件: <?xml version="1.0" standalone="yes"?> <student> <stuinf ...

  7. table中thead固定一直在最上面

    <link rel="shortcut icon" href="favicon.ico"> <link href="css/boot ...

  8. 前端：table、thead、th、tr、td

    table:表格:thead:表头:tr:行:td:单元格:th:一行的首个单元格 tbody包含行的内容下载完优先显示,不必等待表格结束.另外,还需要注意一个地方.表格行本来是从上向下显示的.但是, ...

  9. 纯CSS,table的thead固定,tbody显示滚动条

    以下代码,仅在谷歌下测试过 首先是html的table的代码: <table class="tablediv" id="myTable" border=& ...

随机推荐

  1. 构建混合应用方式之WCF中继

    使用VPN或者ER服务建立云服务和本地服务网络通道来搭建混合应用的方式,需要网络设备的配合和比较复杂的网络配置,所以不是特别的方便.如果是不希望对本地网络环境做修改,而只是服务层面的混合,那么可以使用 ...

  2. 阿里云服务器linux(cenos)下 jdk、tomcat的安装配置

    一.JDK的安装与环境配置 1. 下载jdk http://www.oracle.com/technetwork/java/javase/downloads/jdk8-downloads-213315 ...

  3. 第二章：2.9 总结一下 Django

    1. URLconf(URL configuration ) : 这个模块包含URL模式(正则表达式)到视图函数(view.py)的简单映射. 2. python 正则表达式: 解释: 通配符:r : ...

  4. 如何查看安装的sql server是什么版本

    方法 1:通过使用 SQL Server Management Studio 中的对象资源管理器连接到服务器.连接对象资源管理器后,它将显示版本信息(在括号中),以及用于连接到 SQL Server ...

  5. Jsp注册页面身份证验证

    <!--身份证验证 --><script type="text/javascript">function isCardNo(Idcardnumber) { ...

  6. SQLServer中的执行计划缓存由于长时间缓存对性能造成的干扰

    本文出处:http://www.cnblogs.com/wy123/p/7190785.html (保留出处并非什么原创作品权利,本人拙作还远远达不到,仅仅是为了链接到原文,因为后续对可能存在的一些错 ...

  7. 分享一个废弃已久的插件架构 (.Net)

    框架介绍 1:将插件暴露的页面数据接口复用到任何 WebForm和Mvc 架构的系统. 2:插件可在线卸载,发布,更新. 3:插件可分布式 独立 部署. 4:插件之间完全解耦,通过Url跳转 相互不需 ...

  8. 基于Centos开启samba服务

    1.安装samba服务: yum -y install samba samba-common samba-client2.查看samba服务状态: service smb status: 正常状态是: ...

  9. 使用 electron 实现类似新版 QQ 的登录界面效果（阴影、背景动画、窗体3D翻转）

    上文<使用 VS2017 和 js 进行桌面程序开发 - electron 之 Hello Word>介绍了如何使用 VS2017 开发 electron 桌面程序,今天来点有看头的,但是 ...

  10. PHPOffice/PHPExcel生成省市区三级联动的excel表格

    最近公司需要用到一个省市区三级联动的excel表格,但是数据都在数据库,又太多,人工不好制作,就让我这个phper来帮忙啦. 主要用到的是excel的定义名称,数据验证.其中数据验证的列表只能是一列或 ...