0

基本上，我想将我td的 s 水平地分开。在 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/

4

3 回答 3

2

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

float:left; display:block;

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

于 2013-02-08T01:57:53.957 回答
0

您可以通过指定边框大小或 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

于 2013-02-08T02:23:04.020 回答
0

边距不适用于 td 元素。

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

于 2013-02-08T10:44:04.977 回答