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=& ...
随机推荐
- xUtils使用详细介绍
xUtils3使用详解 一.xUtils简介: xUtils是基于Afinal开发的目前功能比较完善的一个Android开源框架,官网:https://github.com/wyouflf/xUtil ...
- 微信小程序知识总结及案例集锦
微信小程序知识总结及案例集锦 微信小程序的发展会和微信公众号一样,在某个时间点爆发 学习路径 微信小程序最好的教程肯定是官方的文档啦,点击这里直达 微信官方文档 认真跟着文档看一遍,相信有vue前端经 ...
- java基础系列--Date类
原创作品,可以转载,但是请标注出处地址:http://www.cnblogs.com/V1haoge/p/7126930.html 1.Date类概述 Date类是从JDK1.1就开始存在的老类,其提 ...
- 数位DP练习
水题 发布时间: 2017年6月22日 19:15 最后更新: 2017年6月23日 20:10 时间限制: 1000ms 内存限制: 128M 描述 给一个数n,求0~n内有多少个数满足 ...
- webpack的Hot Module Replacement运行机制
使用webpack打包,难免会使用Hot Module Replacement功能,该功能能够实现修改.添加或删除前端页面中的模块代码,而且是在页面不刷新的前提下.它究竟是怎么运作的呢?本文主要从调试 ...
- JavaScript跨域请求和jsonp请求实例
<script type="text/javascript" src="./whenReady.js"></script> <sc ...
- Luogu 2756 飞行员配对方案问题(二分图最大匹配)
Luogu 2756 飞行员配对方案问题(二分图最大匹配) Description 英国皇家空军从沦陷国征募了大量外籍飞行员.由皇家空军派出的每一架飞机都需要配备在航行技能和语言上能互相配合的2 名飞 ...
- JS - 讨论 - 编码习惯 - JavaScript代码到底要不要写分号?
如题:烦请大家在评论区给出原创意见!多谢!
- 以Random Forests和AdaBoost为例介绍下bagging和boosting方法
我们学过决策树.朴素贝叶斯.SVM.K近邻等分类器算法,他们各有优缺点:自然的,我们可以将这些分类器组合起来成为一个性能更好的分类器,这种组合结果被称为 集成方法 (ensemble method)或 ...
- linux文件系统及bash基础特性
linux文件系统 一.根文件系统 linux被识别的第一个被称为根之间关联的文件系统叫做根文件系统(rootfs),其他分区要想被读到,需要挂载到根目录的某个挂载点(根的子目录)上.根文件系统至关重 ...