margin-left样式不适用于第二个元素

Question

并排有两个单元格的表格：

<table>
  <td disabled>Something Here</td>
  <td style="margin-left:100px;" disabled>Second Cell</td>    
</table>

margin-left:100px无法将第二个细胞与第一个细胞分开。如何在第二个单元格的左侧创建空间？

左侧填充

padding-left:100px

产生此结果：

第二个单元格的内容现在在左侧添加了100px的空间。然而，单元格 background 的位置保持不变。

边界间距

<table style="border-spacing: 100px 0; margin: 0 -100px">

产生这个结果：

如果我添加第三个表格单元格，我会得到这个结果：

我不希望每个单元格之间的间距，只是第二个单元格。

CELLSPACING

table元素中的

cellspacing在每个单元格周围创建间距。我也不希望这样，并且有一个消息来源声明HTML5中不支持cellspacing。

Answer 1

Margin不会使用表格单元格。请尝试padding或cellspacing=""来表格。

或者在表格单元格中添加div并将边距应用于div。

<td style="padding-left:100px;" disabled>Second Cell</td>  

Answer 2

根据CSS规范，margin properties不适用于表格单元格（display: table-cell的元素）。设置它们是有效的，但设置无效。

分隔表格单元格的方法是在table元素上设置border-spacing，例如与<table style="border-spacing: 100px 0">。但是，这也设置了单元格和表格边缘之间的间距。可以使用负边距清除此效果：

<table style="border-spacing: 100px 0; margin: 0 -100px">
  <td disabled>Something Here</td>
  <td disabled>Second Cell</td>    
</table>

警告：IE 7（及更早版本）不支持border-spacing，但它支持margin属性，因此结果将全部错误。如果这是相关的，请将CSS代码放在style元素中，并将其包装在“伪命令”中，使得IE 7及更早版本忽略它。

根据上下文，在第二个单元格上设置左边距的简单方法可能效果很好。但是，它会在第二个单元格内创建间距，而不是在单元格之间。这种和细胞间距之间的差异很重要，例如如果细胞有背景或边界。

Answer 3

添加另一个<td>元素，将文本颜色设置为与背景相同，将背景颜色设置为透明，输入所需的间距字符数。

显示背景的插图用于显示目的：

<table>
  <td>Something Here</td>
  <td style='color:white; background-color: green'>123456</td>
  <td>Second Cell</td>
  <td>Third Cell</td>
</table>

创建一个虚拟细胞＆＃39;间距为6个字符。现在将背景设置为透明。

单元格背景设置为透明，文本颜色设置为与父元素相同。

<table>
  <td>Something Here</td>
  <td style='color:white; background-color: transparent;'>123456</td>
  <td>Second Cell</td>
  <td>Third Cell</td>
</table>

到目前为止，我首选的方法是简单地为间距添加另一个<td>元素。但我愿意接受任何更好的解决方案。