今天遇到一个小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. Angular 4 学习笔记 从入门到实战 打造在线竞拍网站 基础知识 快速入门 个人感悟

    最近搞到手了一部Angular4的视频教程,这几天正好有时间变学了一下,可以用来做一些前后端分离的网站,也可以直接去打包web app. 环境&版本信息声明 运行ng -v @angular/ ...

  2. C#窗体多语言切换（简繁）

    多窗体最好继承一个父窗体,在父窗体Load事件中执行此方法 添加引用 using Microsoft.VisualBasic; #region 语言切换 /// <summary> /// ...

  3. JS运动框架的封装过程(一)

    给大家出一道题,从起点A走到目的地B,一共用了1000毫秒,每一次是30毫秒,请问你在这里面得到了哪些信息? 信息有哪些呢? 第一个,总时长是:1000毫秒 第二个,多久时间走一次?30毫秒 第三个, ...

  4. （转载）Sybase:bcp命令参考

    参考文档: http://blog.csdn.net/wwp1026/article/details/6900569

  5. usaco training 4.2.2 The Perfect Stall 最佳牛栏 题解

    The Perfect Stall题解 Hal Burch Farmer John completed his new barn just last week, complete with all t ...

  6. English Learning - Vampire bats

    " Vampire bats are very adaptable." Bambi said. And when their roosts are disrupted or the ...

  7. Struts2请求参数合法性校验机制

    在Action中通过代码执行数据校验 请求参数的输入校验途径一般分两种:客户端校验 :通过JavaScript 完成 (jquery validation插件),目的:过滤正常用户的误操作. 服务器校 ...

  8. Python Django之路与您同行

    大家好,我是TT,互联网测试行业多年,没有牛逼的背景,也没有什么可炫耀的,唯独比他人更努力,在职场打拼.遇到过的坑,走过的弯路,愿意与大家分享,分享自己的经验,少走弯路.首发于个人公众号[测试架构师] ...

  9. jQuery选择器分类

    jQuery的基本选择器 选择器的分类 <!--1.基本选择器 2.层级选择器 3.过滤选择器 3.1 基本过滤选择器 3.2 内容过滤选择器 3.3 可见性过滤选择器 3.4 子元素过滤选择器 ...

  10. jvm005 从jvm的角度谈谈线程的实现

    一.线程的实现 在谈谈线程之前,我们要先知道线程是何物?在学习操作系统时,我们得知进程和线程的概念,接下来我们将开始揭示线程. 什么是进程?通过任务管理器我们就看到了进程的存在.而通过观察,我们发现只 ...