CSS表格式的矩陣上的邊框樣式，沒有額外的類

我只用CSS做了一個類似於表格的佈局。將所有單元格設置爲float:left時，容器.matrix對於4個單元格是足夠寬的。CSS表格式的矩陣上的邊框樣式，沒有額外的類

<div class="matrix"> 
    <!-- first row --> 
    <div class="cell">Cell contents</div> 
    <div class="cell">Cell contents</div> 
    <div class="cell">Cell contents</div> 
    <div class="cell right">Cell contents</div> 
    <!-- last row --> 
    <div class="cell last">Cell contents</div> 
    <div class="cell last">Cell contents</div> 
    <div class="cell last">Cell contents</div> 
    <div class="cell last right">Cell contents</div> 
</div>

要控制在邊框樣式應用於我用.last和.right類的邊緣忽略邊框的樣式：

.cell { 
    border-bottom:1px solid red; 
    border-right:1px solid red; 
} 
.right { 
    border-right:none; 
} 
.last { 
    border-bottom:none; 
}

我想知道如果任何人有技術，其中我實現相同的結果/邏輯 - 但不需要額外的類。

感謝您的協助！

來源

2011-10-26 o01

如果這是「表樣」，有沒有理由不使用表？ – Spudley

我想我找到了一個沒有使用額外的類，CSS3選擇器或包裝元素的解決方案。通過給容器中的overflow:hidden，細胞稍微移動，像這樣：

.matrix{ 
    width:400px; 
    overflow:hidden; 
} 

.cell { 
    width:100px; 
    float:left; 
    border-left:1px solid #ccc; 
    border-bottom:1px solid #ccc; 
    position:relative; 
    bottom:-1px; 
    padding:5px; 
    left:-1px; 
}

見這裏的例子：http://jsfiddle.net/KBMvL/5/

來源

2011-10-28 09:58:30 o01

有一種方法，但它使用了一些舊瀏覽器無法理解的選擇器。您的解決方案是最安全的解決方案，因此它是最常見的解決方案。

在CSS3中有很多新的選擇器，其中一些可以解決您的問題。這裏是useful selectors

來源

2011-10-26 09:49:16

一個有趣的名單這是你將如何使用CSS :nth-child選擇

做

.matrix{ 
    width:400px; 
} 

.cell { 
    border-bottom:1px solid red; 
    border-right:1px solid red; 
    float:left; 
    padding:.5em; 
} 

.cell:nth-child(n+5):nth-child(-n+8){ 
    border-bottom:none; 
} 

.cell:nth-child(4), .cell:nth-child(8){ 
    border-right:none; 
}

例子：http://jsfiddle.net/KBMvL/

來源

2011-10-26 11:18:36

這依賴於CSS3，對嗎？並與 o01

這就對了@Orolin。除IE8及以下版本之外的所有人都支如果您需要支持

@Orolin - 如果反轉邊界，則可以使用'：first-child'來代替IE7和IE8支持的*。 – Spudley

如果使用行周圍的包裝元素，那麼你可以使用CSS :last-child來處理右側的單元格和底部的單元格。

我會假設你的包裝元素也將是一個<div>：

.cell { 
    border-bottom:1px solid red; 
    border-right:1px solid red; 
} 

.matrix>div:last-child>.cell, .matrix>div>.cell:last-child { 
    border-bottom:none; 
}

但是請注意，:last-child不IE8和支持更早。

你可能有更多的運氣設定相反的邊界（即頂部和左），並使用:first-child而是空出的最左邊最上面和細胞，因爲:first-child由IE7和IE8的支持。最終結果將完全相同。

你可以找到更多關於CSS選擇這裏的瀏覽器支持：http://quirksmode.org/css/contents.html

如果你需要使用:last-child，你需要支持IE7/8，那麼你也許可以得到它通過使用工作JavaScript庫，如Selectivizr。

然而，畢竟，我還會說，鑑於我爲行添加的包裝器元素，我們最終獲得了與HTML表相同的基本結構。所以問題是爲什麼不簡單地使用表格？然後，您可以使用border-collapse來實現類似的結果。

關於這最後一點，我知道你把'無表'作爲標籤放在問題上，所以我假設你正在爲無表設計工作。但是，如果數據本質上是表格，那麼使用表格沒有任何問題。無表設計旨在阻止人們使用任意頁面佈局的表格，但在正確的上下文中使用表格時，表格仍然非常有效。問題中的描述確實使得聽起來很像你的例子屬於這個類別。

希望有所幫助。

來源

2011-10-26 11:32:33 Spudley

CSS表格式的矩陣上的邊框樣式，沒有額外的類

回答

相關問題