为啥HTML中table内部的内外边距不可用？

Posted 2023-03-29

tags:

篇首语：本文由小常识网(cha138.com)小编为大家整理，主要介绍了为啥HTML中table内部的内外边距不可用？相关的知识，希望对你有一定的参考价值。

为什么table内部的内外边距不可用？

table标签，默认的display方法是：table
tr标签，默认的display方法是：table-row
td标签，默认的display方法是：table-cell

padding可以用于td标签（margin不能用），但是margin、padding都不能用于tr标签
除非你更改其display为block～（会破坏表格）参考技术A table的内边距是使用属性cellpadding,如下：
<!DOCTYPE html>
<html lang="en">
<head>
</head>
<body>
<table cellpadding="10" border="1" style="border:1px solid red;border-collapse:collapse;">
<tr>
<td>111</td>
<td>222</td>
</tr>
<tr>
<td>333</td>
<td>444</td>
</tr>
</table>
</body>
</html> 参考技术B 可以在td里添加一个div，设置div的边距。

在 Firefox 表格边距不折叠

【中文标题】在 Firefox 表格边距不折叠【英文标题】：In Firefox table margins don't collapse 【发布时间】：2012-01-04 15:15:21 【问题描述】：

我创建了this fiddle 来演示这个问题。表格边距在 Firefox 中不会折叠，而在 Chrome 和 IE 中会折叠。

火狐

Chrome 和 IE

这个问题有解决办法吗？

【问题讨论】：

不管怎样，这个错误已在 Firefox 10 中得到修复。 【参考方案1】：

Firefox 不是 collapsing vertical margin 和 table's，因为 http://www.fiveminuteargument.com/margin-collapse-tables

像这样在表格中写display:block：

section, div, table 
    margin: 1em;
    display:block;

查看这个例子http://jsfiddle.net/fhhWd/2/

【讨论】：

但是“display: block”又产生了一个bug；看看这个jsfiddle.net/fhhWd/5

以上是关于为啥HTML中table内部的内外边距不可用？的主要内容，如果未能解决你的问题，请参考以下文章