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

最新推荐文章于 2025-06-27 11:37:56 发布

原创最新推荐文章于 2025-06-27 11:37:56 发布 · 3.3k 阅读

1 ·

CC 4.0 BY-SA版权

文章标签：

#html #table #thead

本文通过对比不使用与使用thead, tfoot, tbody标签的表格代码在搜狗浏览器中的表现，探讨了这些标签对表格布局样式的影响及浏览器兼容性问题。在IE浏览器中，表格显示正常，但在搜狗浏览器中，加上这三个标签后表格样式被改变，即使尝试调整样式也无法恢复。

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