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

论坛 期权论坛 脚本     
匿名技术用户   2020-12-27 16:40   11   0

关于尽量不使用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浏览器中运行则显示正常。

分享到 :
0 人收藏
您需要登录后才可以回帖 登录 | 立即注册

本版积分规则

积分:7942463
帖子:1588486
精华:0
期权论坛 期权论坛
发布
内容

下载期权论坛手机APP