今天遇到一个小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. Less 的使用

    Less 的使用 开发时直接使用 引用你的样式文件(main.less) (必须在less.min.js) 前引用 引用less.min.js 文件 <link href="resou ...

  2. Unity 游戏框架搭建 (三) MonoBehaviour单例的模板

      上一篇文章讲述了如何设计C#单例的模板.也随之抛出了问题: 如何设计接收MonoBehaviour生命周期的单例的模板? 如何设计? 先分析下需求:   1.约束脚本实例对象的个数.   2.约束 ...

  3. (转载)提高系统OOP抽象以应对复杂的需求

    提高系统OOP抽象以应对复杂的需求, 转自:http://www.nowamagic.net/librarys/veda/detail/1373 有人问我如何构建一个比较好的类阶层次,如何使用面向对象 ...

  4. 【ALB技术笔记】基于多线程方式的串行通信接口数据接收案例

    基于多线程方式的串行通信接口数据接收案例 广东职业技术技术学院  欧浩源 1.案例背景 在本博客的<[CC2530入门教程-06]CC2530的ADC工作原理与应用>中实现了电压数据采集的 ...

  5. webpack初步介绍

    我们通过npm -g可以安装一个webpack的东西. npm -g叫做全局安装,通常是安装CLI程序(commond line interface). 我们只用过一次,装了cnpm.此时就能在CMD ...

  6. xhr.readyState就绪状态

    0:初始化,XMLHttpRequest对象还没有完成初始化 1:载入,XMLHttpRequest对象开始发送请求 2:载入完成,XMLHttpRequest对象的请求发送完成 3:解析,XMLHt ...

  7. GET请求和POST请求的区别

    request获取请求参数 最为常见的客户端传递参数方式有两种: 浏览器地址栏直接输入:一定是GET请求: 超链接:一定是GET请求: 表单:可以是GET,也可以是POST,这取决与<form& ...

  8. 启动Tomcat提示:指定的服务未安装

    新下载的Tomcat7.0 解压缩完了运行tomcat7.exe屏幕一闪就没了 运行tomcat7w.exe弹出个筐 指定的服务并未以已安装的服务存在 Unable to open the Servi ...

  9. OCP 11G 实验环境安装文档 ( RedHat5.5 + Oracle11g )

    RedHat5.5 linux下Oracle11g软件安装 一.配置虚拟机 为了创建和配置虚拟机,你需要添加硬件设备如磁盘和cpu,在你开始安装之前,创建一个windows目录作为存放虚拟机的目录 目 ...

  10. 阿里云VPC绑定EIP实现SNAT

    阿里云VPC需要了解的几个问题 什么是VPC 虚拟私有网络(Virtual Private Network),能够帮助用户基于阿里云构建出一个隔离的网络环境.用户可以完全掌控自己的虚拟网络,包括选择自 ...