CSS - 邊框只與表格中的單元格間距

Question

我想弄清楚如何在單元格間距的表格內添加邊框。當我這樣做：

table { 
    border-collapse: collapse; 
    border-spacing: 4px; 
} 
table td, table th { 
    border: 1px solid black; 
} 

它工作得很好，只是細胞沒有間距。如何實現這一目標？

感謝

Answer 1

如果你想上寫上您已經定義了cellspacing屬性爲表CSS規則，一個解決辦法是這樣的：

table[cellspacing] { 
    border-collapse: collapse; 
    border-spacing: 4px; 
} 
table[cellspacing] td, table[cellspacing] th { 
    border: 1px solid black; 
} 

但它會更清潔，更有效率地給你的表上課（<table class="withspace">）。所以，你會更經典做

table.withspace { 
    border-collapse: collapse; 
    border-spacing: 4px; 
} 
table.withspace td, table.withspace th { 
    border: 1px solid black; 
} 

編輯：爲了以防萬一，如果你想要的東西很簡單，就是在你的細胞中的一些空間，在你的CSS添加填充值：

table { 
    border-collapse: collapse; 
    border-spacing: 4px; 
} 
table td, table th { 
    border: 1px solid black; 
    padding: 4px; 
} 

Answer 2

的CSS發佈的代碼是正確的，並且在符合的瀏覽器上導致單元格周圍的邊界（但整個表格周圍）和單元格之間4px的間距。我想你是在IE 7或更舊版本上測試的，它不支持border-spacing屬性。

恐怕沒有比創建沒有任何邊框的表格更簡單的解決方法，並且在每個單元格內放置一個內部元素，使得該單元格佔用整個單元格，除了小邊距，並在內部元素周圍繪製邊框。這可能會變得很難看，所以我寧願讓IE 7的展示效果不理想。

（出於某種原因，border-spacing似乎並不在的jsfiddle工作。也許有些一般來說覆蓋正常嘗試設置該屬性。）