今天遇到一个小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. Chrome DevTools 调研笔记

    1  说明 此篇文章针对Chrome DevTools常用功能进行调研分析.描述了每个功能点能实现的功能.应用场景和详细操作. 2  Elements 2.1  功能 检查和实时更新页面的HTML与C ...

  2. org.apache.commons.beanutils.BeanMap简单使用例子

    一.org.apache.commons.beanutils.BeanMap; 将一个java bean允许通过map的api进行调用, 几个支持的操作接口: Object get(Object ke ...

  3. HTML form表单小结

    HTML form标签小结 最近研究 form标签,有一些小心得写下来与大家分享分享,共勉.在小结的最后有一个form表单的小例子,可以作为参考. -----DanlV form是HTML的一个极为重 ...

  4. Chrome浏览器扩展开发系列之一：初识Google Chrome扩展

    1.       Google Chrome扩展简介 Google Chrome扩展是一种软件,以增强Chrome浏览器的功能. Google Chrome扩展使用HTML.JavaScript.CS ...

  5. Unity-奥义技能背景变黑效果

    [旧博客转移 - 2016年8月29日 12:51 ] 前段时间做了一个放技能的时候,背景缓慢变黑,放完后再变回来的效果,可以很好的突出技能特效的感觉. 算是一种屏幕后期特效,这个特效说难不难,说简单 ...

  6. C# datatable 去重

    若检索出的datatab有重复行,而在绑定下拉列表时不希望有重复行,可使用以下代码将数据表去重: this.cmbE_NENRYOU_SBT.DataSource = dt.DefaultView.T ...

  7. input复选框操作的部分高频率使用代码

    1. 获取单个checkbox选中项(三种写法): $("input:checkbox:checked").val() 或者 $("input:[type='checkb ...

  8. Struts2简诉

    Struts2框架是基于MVC模式的开源,MVC模式是一种开发方式,主要作用是对组件之间进行隔离,M代表业务逻辑层,V代表视图层,C代表控制层.有利于代码的后期维:Struts2框架的源码主要来于We ...

  9. CONSOLE_SCREEN_BUFFER_INFO 结构体

    CONSOLE_SCREEN_BUFFER_INFO结构体 来源:https://msdn.microsoft.com/en-us/library/ms682093(v=vs.85).aspx 作用 ...

  10. （转）如何将 Excel 文件导入到 Navicat for MySQL 数据库

    场景:工作中需要统计一段时间的加班时长,人工统计太过麻烦,就想到使用程序实现来统计 1 如何将 Excel 文件导入到 Navicat for MySQL 数据库 Navicat for MySQL  ...