<td> 间距在 Chrome 中不起作用答案

【问题标题】：<td> Spacing not working in Chrome<td> 间距在 Chrome 中不起作用
【发布时间】：2017-05-16 15:21:14
【问题描述】：

基本上，我想将我的tds 水平间隔开。在 Firefox 中，通过设置边距可以正常工作，但边距在 chrome 中不起作用。所以我尝试了以下并将其应用于表格

border-spacing: 40px;
border-collapse: separate;

此外，该解决方案适用于 chrome，但不适用于 Firefox；即使指南建议我需要 border-collapse: 单独让它在 Firefox 中工作。

没有任何进一步的细节，这里是表格样式的代码（在 Firefox 中工作的那个）：

#tstyle3 {
    margin: 10px 0 0 0px;
    width: 750px;
    border-collapse: separate;
}

#tstyle3 tr {
    height: 270px;
    border-bottom: none;
    border-collapse: separate;
    width: 950px;
    display: inline-block;
}

#tstyle3 td {
    border-top: none;
    display: inline-block;
    position: relative;
    border-collapse: separate;
    margin: 0 30px 0 0;
    height: 220px;
    width: 220px;
    background-color: white;
    float: left;
    box-shadow: 0px 3px 5px #b5b6b6;
}

并且在 jsfiddle 中重新创建了这种情况（显示了它在 Firefox 中的显示方式）

http://jsfiddle.net/JjZNb/

【问题讨论】：

标签： html css google-chrome firefox css-tables

【解决方案1】：

你试试更性感的东西怎么样

float:left; display:block;

http://jsfiddle.net/JjZNb/1/

【讨论】：

浮点数自动转换为块
您似乎找到了解决方案。谢谢我的朋友！
确保将“overflow:hidden”添加到“#table”中，以便为下一个 DOM 元素计算容器的高度。
嘿，请注意，我在示例中没有使用表格。一般来说，表格很难修改和阅读。请查看我的 jsfiddle 示例，看看它如何使代码更简洁。当然有些人会不同意，但这是个人建议，使用浮动 div 而不是表格。
@mika - 在所有浏览器上。它在规范中：w3.org/TR/CSS21/visuren.html#propdef-float

【解决方案2】：

边距不适用于 td 元素。

这不太对。边距不适用于表格单元格（因此带有display:table-cell 的元素。但上面的CSS 将<td> 元素的样式设置为带有display: inline-block 的样式，因此它们不再是表格单元格，应该应用边距。

【讨论】：

【解决方案3】：

您可以通过指定边框大小或填充 td 元素来添加间距。

td{border:8px solid #fff;}

或用于填充

td{padding:0 10px;}

或者当边框样式已经定义时，

td{border-width:2px;}

或每边

td{border-width:0 2px 0 2px;}
/* top right bottom left*/

这里有一个 jsFiddle 演示了上面的 http://jsfiddle.net/VjkP9/

【讨论】：