Question

基本上，我希望将td水平分开。在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/

Answer 1

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

float:left; display:block;

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

Answer 2

您可以通过为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*/

这是一个演示上述http://jsfiddle.net/VjkP9/

的jsFiddle

Answer 3

保证金不适用于td元素。

那不太对劲。保证金不适用于表格单元格（所以带有display:table-cell的元素。但上面的CSS使用<td>对display: inline-block元素进行样式处理，因此它们不再是表格单元格，并且应该应用边距他们。

间距在Chrome中无效

3 个答案: