用CSS限制表格行和間距？

我有一張桌子，我需要在給定的行或行之間放置一個邊框，並在它們之間留有間距。用CSS限制表格行和間距？

我似乎可以做一個或另一個。

我知道我可以使用

table { border-collapse: separate; border-spacing: 1em 0.5em; }

爲了讓我的間距，但隨後的邊界不會顯示一些東西像

tr.bordered { border: 1px solid blue; }

如果我設置border-collapse: collapse，藍色的邊框顯示。但是沒有間距。

我在這裏錯過了什麼嗎？

編輯：JS FIDDLE here

你可以看到，如果你用「崩潰」，邊境的作品，但沒有空間。

如果您使用「分開」，您會得到間距但沒有邊框。

來源

2014-04-18 Steve

可能是有幫助的像這樣的財產以後一個的jsfiddle。 –

或者添加你想要的結果圖。我不清楚你是否想要出現邊界和間距。 – Mathias

增加了一個小提琴。我需要行和列之間的間距，但我還需要指定的行纔能有邊框。 – Steve

我想你想要的是在單元格邊界和它的數據之間放置空格嗎？如果是這樣，你可以在td中使用屬性填充。例如：

td { 
padding-left: 10px; 
padding-right: 10px; 
padding-bottom: 10px; 
padding-top: 10px; 
}

來源

2014-04-18 19:43:44

你可以嘗試繪製unblured陰影：DEMO

.bordered { 
    box-shadow:0 0 0 1px black; 
}

:(這部作品在FF，但...

如此，我們可以使用:first-child和:last-child從td個S，

DEMO 2

.bordered td { 
    border: 1px solid #000; 
    border-left:none; 
    border:right:none; 
    padding:1em 0.5em; 
    border-right:none; 
} 
.bordered td:first-child { 
    border-left:1px solid #000 
} 
.bordered td:last-child { 
    border-right:1px solid #000; 
    border-left:none; 
} 
table { 
    border-spacing: 0; 
}

來源

2014-04-18 19:44:29

重複的問題在這裏：Style row or column rather than cells when border-collapse: separate

的建議是使用colspan設爲模擬錶行，並添加邊框表在colspan裏面。

來源

2014-04-18 19:47:45 Seanna

colspan似乎總是過度殺傷。你可以做到這一點沒有額外的colspans或其他。 http://jsfiddle.net/6rLsL/1/ – JohanVdR

，它可以用於背景顏色，我可能會使用它，但不是邊框。看到http://jsfiddle.net/6rLsL/2/ – Steve

@seanna是的我想到了一個嵌套的表，但我會有很多行，然後它變得棘手讓所有的列對齊。首先使用表格的想法是我可以對齊表格數據。 – Steve

你可以擁有它接壤的內表：

<table> 
    <tr><td colspan="3"> 

    <table class="bordered"> 
     <tr> 
      <td>foo</td> 
      <td>bar</td> 
      <td>baz</td> 
     </tr> 
    </table> 

    </td></tr> 
    <tr> 
     <td>lorem</td> 
     <td>ipsum</td> 
     <td>dolor</td> 
    </tr> 
</table>

演示：http://jsfiddle.net/2nMcg/7/

來源

2014-04-18 19:49:18

如果你想在錶行之間的間距，並添加邊框風格，每一行，你可以做到這一點通過設置只有頂部和底部邊框間距，否則您不能爲每個表格行有一個連續的線。你需要在td上設置邊框樣式。由於border-collapse：collapse可防止在TR元素上設置邊框的樣式，但您需要它來設置行之間的頂部和底部間距。
http://jsfiddle.net/6rLsL/1/
http://jsfiddle.net/6rLsL/1/show

table { 
    border-collapse: separate; 
    border-spacing: 0 0.5em; 
} 

td { 
    padding: 0.5em; 
    border-top: 1px solid #000; 
}

來源

2014-04-18 19:57:42 JohanVdR

用CSS限制表格行和間距？

回答

相關問題