table之thead兼容
今天遇到一个小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兼容的更多相关文章
- Html table、thead、tr、th、td 标签
Html table.thead.tr.th.td 标签 案例一 <!-- table 表格标签,配置表格使用.border="1" 添加表格框架 --> <ta ...
- 网页制作中在头部固定悬浮table表头(thead)的方法
这两天接了一个需求,页面是这样的 然后需求是页面中的这个表格当页面向上滚动,且表格的表头到达窗口上方时,表头悬浮在页面的上方,表格正常滚动,这样表格内的数据可以随时看到表头内容. 一开始我认为这是极简 ...
- table 的thead th 固定 tbody滚动例子
<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8" ...
- table表头thead固定
<html> <head> <meta charset="utf-8"/> <script type="text/javascr ...
- table的thead,tbody,tfoot
为了让大表格(table)在下载的时候可以分段的显示,就是说在浏览器解析HTML时,table是作为一个整体解释的,使用tbody可以优化显示. 如果表格很长,用tbody分段,可以一部分一部分地显示 ...
- JS读取XML文件数据并以table显示数据(兼容IE火狐)
先看xml文件: <?xml version="1.0" standalone="yes"?> <student> <stuinf ...
- table中thead固定一直在最上面
<link rel="shortcut icon" href="favicon.ico"> <link href="css/boot ...
- 前端:table、thead、th、tr、td
table:表格:thead:表头:tr:行:td:单元格:th:一行的首个单元格 tbody包含行的内容下载完优先显示,不必等待表格结束.另外,还需要注意一个地方.表格行本来是从上向下显示的.但是, ...
- 纯CSS,table的thead固定,tbody显示滚动条
以下代码,仅在谷歌下测试过 首先是html的table的代码: <table class="tablediv" id="myTable" border=& ...
随机推荐
- Less 的使用
Less 的使用 开发时直接使用 引用你的样式文件(main.less) (必须在less.min.js) 前引用 引用less.min.js 文件 <link href="resou ...
- Unity 游戏框架搭建 (三) MonoBehaviour单例的模板
上一篇文章讲述了如何设计C#单例的模板.也随之抛出了问题: 如何设计接收MonoBehaviour生命周期的单例的模板? 如何设计? 先分析下需求: 1.约束脚本实例对象的个数. 2.约束 ...
- (转载)提高系统OOP抽象以应对复杂的需求
提高系统OOP抽象以应对复杂的需求, 转自:http://www.nowamagic.net/librarys/veda/detail/1373 有人问我如何构建一个比较好的类阶层次,如何使用面向对象 ...
- 【ALB技术笔记】基于多线程方式的串行通信接口数据接收案例
基于多线程方式的串行通信接口数据接收案例 广东职业技术技术学院 欧浩源 1.案例背景 在本博客的<[CC2530入门教程-06]CC2530的ADC工作原理与应用>中实现了电压数据采集的 ...
- webpack初步介绍
我们通过npm -g可以安装一个webpack的东西. npm -g叫做全局安装,通常是安装CLI程序(commond line interface). 我们只用过一次,装了cnpm.此时就能在CMD ...
- xhr.readyState就绪状态
0:初始化,XMLHttpRequest对象还没有完成初始化 1:载入,XMLHttpRequest对象开始发送请求 2:载入完成,XMLHttpRequest对象的请求发送完成 3:解析,XMLHt ...
- GET请求和POST请求的区别
request获取请求参数 最为常见的客户端传递参数方式有两种: 浏览器地址栏直接输入:一定是GET请求: 超链接:一定是GET请求: 表单:可以是GET,也可以是POST,这取决与<form& ...
- 启动Tomcat提示:指定的服务未安装
新下载的Tomcat7.0 解压缩完了运行tomcat7.exe屏幕一闪就没了 运行tomcat7w.exe弹出个筐 指定的服务并未以已安装的服务存在 Unable to open the Servi ...
- OCP 11G 实验环境安装文档 ( RedHat5.5 + Oracle11g )
RedHat5.5 linux下Oracle11g软件安装 一.配置虚拟机 为了创建和配置虚拟机,你需要添加硬件设备如磁盘和cpu,在你开始安装之前,创建一个windows目录作为存放虚拟机的目录 目 ...
- 阿里云VPC绑定EIP实现SNAT
阿里云VPC需要了解的几个问题 什么是VPC 虚拟私有网络(Virtual Private Network),能够帮助用户基于阿里云构建出一个隔离的网络环境.用户可以完全掌控自己的虚拟网络,包括选择自 ...