必威体育Betway必威体育官网
当前位置:首页 > IT技术

关于html表格结构标签thead,tfoot,tbody使用出现不兼容性

时间:2019-10-01 15:45:35来源:IT技术作者:seo实验室小编阅读:84次「手机版」
 

thead

关于尽量不使用thead,tfoot,tbody三个表格结构标签,存在浏览器兼容性问题的验证

以下是不使用这三个标签时代码demo以及运行效果(搜狗浏览器下运行):

<body>
<table width="700" height="150" border="1">
<caption>表格标签的兼容性问题</caption>
<tr>
<td width="98">页眉1</td>
<td width="87">页眉2</td>
<td width="137">页眉3</td>
<td width="80">页眉4</td>
</tr>
<tr>
<td>页脚1</td>
<td>页脚2</td>
<td>页脚3</td>
<td>页脚4</td>
</tr>
<tr>
<td>表主体内容1</td>
<td>表主体内容2</td>
<td>表主体内容3</td>
<td>表主体内容4</td>
</tr>
</table></body>

搜狗浏览器下运行

再来看看加上这三个标签后:

<body>
<table width="700" height="150" border="1">
<caption>表格标签的兼容性问题</caption>
<thead>
<tr>
<td width="98">页眉1</td>
<td width="87">页眉2</td>
<td width="137">页眉3</td>
<td width="80">页眉4</td>
</tr>
</thead>
<tfoot>
<tr>
<td>页脚1</td>
<td>页脚2</td>
<td>页脚3</td>
<td>页脚4</td>
</tr>
</tfoot>
<tbody>
<tr>
<td>表主体内容1</td>
<td>表主体内容2</td>
<td>表主体内容3</td>
<td>表主体内容4</td>
</tr>
</tbody>
</table></body>

搜狗浏览器下运行

以上都是在搜狗浏览器下运行效果,可以发现,虽然加上< thead> < tfoot > < tbody >这三个表格结构标签后,页脚的 “页脚 1234” 确实被放在最后一行呈现,但表格的布局样式被完全改变了,然后尝试在< tfoot > < tbody > 乃至< thead >中加上style="height:150"后重新在搜狗浏览器中运行发现仍无法恢复原表格样式(效果未给出),当然这是由于浏览器兼容性导致的,在ie浏览器中运行则显示正常。

相关阅读

excel表格做目录的方法步骤

Excel是一个办公很经常用到的一个办公软件,他主要用于数据的分析、查看、对比等,让数据看起来更直观,更容易对比,而有很多时候需要在

Excel中表格数据进行分类汇总的操作方法

Excel作为公司的出具处理工具,一定离不开分类汇总。我们又该如何对数据进行分类汇总呢。今天,seo实验室小编就教大家在Excel中进行

excel表格输入身份证号乱码怎么解决

我们平时在编辑excel表格的时候,难免要输入身份证号,很多朋友应该都会有一个疑问,输入身份证号之后会显示乱码出来,然后就去重新输入

tabel thead 滑动固定顶部

试了几种方法,还是 translateY 比较靠谱 放弃 ie // 固定头部 var thead_top = $('thead').offset().top; $(window).scroll(fun

excel2007表格冻结的教程

Excel中的表格冻结具体该如何操作呢?下面是由seo实验室小编分享的excel2007表格冻结的教程,以供大家阅读和学习。excel2007表格冻

分享到:

栏目导航

推荐阅读

热门阅读