今天遇到一个小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. 巧用五招提升Discuz!X运行速度

    Discuz!X使用的是数据库应用程序,所以,当数据库的大小.帖子的数目.会员的数目,这些因素都会影响到程序的检索速度,尤其是当论坛的影响力大了,这个问题就更为突出了,虽然,康盛对Discuz进行了更 ...

  2. js 、jq强化复习

    JavaScript 显示数据 JavaScript 可以通过不同的方式来输出数据: 使用 window.alert() 弹出警告框. 使用 document.write() 方法将内容写到 HTML ...

  3. Javascript 类继承

    Js继承 JavaScript并不是真正面向对象的语言,是基于对象的,没有类的概念. 要想实现继承,可以用js的原型prototype机制或者用apply和call方法去实现 /** 声明一个基础父类 ...

  4. c++有关构造函数和析构函数中调用虚函数问题

    今天看了一道迅雷的笔试题目,然后引起一段思考,题目如下: 下列关于虚函数的说法正确的是()A.在构造函数中调用类自己的虚函数,虚函数的动态绑定机制还会生效.B.在析构函数中调用类自己的虚函数,虚函数的 ...

  5. 在ASP.NET CORE 2.0使用SignalR技术

    一.前言 上次讲SignalR还是在<在ASP.NET Core下使用SignalR技术>文章中提到,ASP.NET Core 1.x.x 版本发布中并没有包含SignalR技术和开发计划 ...

  6. accp8.0转换教材第6章连接MySQL理解与练习

    JDBC_ODBC,纯java方式连接mysql 1.单词部分 ①JDBCjava连接数据库②driver manager驱动③connection连接④statement声明 ⑤execute执行⑥ ...

  7. python编程快速上手之第7章实践项目参考答案

    #!/usr/bin/env python3.5 #coding:utf-8 import re # 7.18.1 # 强口令检测 # 写一个函数,使用正则表达式,确保传入的口令字符串是强口令 # 长 ...

  8. 學習 DT device tree 以 ST 的開發板 STM32F429i-disc1 為例

    目標 因為對 device tree 不是很熟悉, 所以就將 device tree, 設為學習目標. 啟動 注意, 這篇隨筆的解說都放在最下面,會標 Explanation_XX,只要搜尋 Expl ...

  9. .NET平台的ORM分析工具

    众所周知,“ORM”和“性能问题”常常一起出现.ORM通过对开发人员隐藏SQL细节可以大大的提高生产力.然而,它们很容易产生一些未被发现的荒谬查询.通常情况下,数据库管理员可以通过交叉引用有问题的存储 ...

  10. Android5.1 - 通讯录建立群组

    [问题] 在没有账户的时候,不应该有添加联系人群组的选项. 我们要把这个选项干掉. [相关log]06-23 17:25:00.804: E/GroupEditorFragment(6030): No ...