在Chrome中不起作用的間距

基本上，我想將我的td s彼此分開。在Firefox中，通過設置邊距可以正常工作，但邊距在Chrome中不起作用。所以我嘗試了以下方法並將其應用到表格中在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/

來源

2013-02-08 Sean Marcus

你嘗試一些更性感像

float:left; display:block;

0什麼

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

來源

2013-02-08 01:57:53 mika

浮動塊會自動轉換爲塊 – Rob

@Rob在所有瀏覽器上？ – mika

您似乎找到了解決方案。謝謝我的朋友！ –

您可以通過爲您的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，演示在以上

來源

2013-02-08 02:23:04 lukeocom

保證金不適用於td元素。

這並不完全正確。保證金不適用於表格單元格（所以元素爲display:table-cell，但上面的CSS樣式爲<td>元素爲display: inline-block，因此它們不再是表格單元格，並且保證金應該適用於它們）

來源

2013-02-08 10:44:04

​​在Chrome中不起作用的間距

回答

相關問題

在Chrome中不起作用的間距