Html CSS表格上的边框样式类似于矩阵，没有额外的类

我只使用CSS制作一个类似表格的布局。当所有单元格都设置为

float:left

时，容器

.matrix

的宽度足以水平放置4个单元格

<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>

我想知道是否有人有一种技术可以让我获得相同的结果/逻辑，但不需要额外的类

---

谢谢你的帮助

有一种方法，但是它使用了一些旧浏览器无法理解的选择器。您的解决方案是最安全的，因此它是最常见的

---

CSS3中有很多新的选择器，其中一些可以解决您的问题。下面是一个有趣的列表，其中列出了这是使用CSS

：第n个子项

选择器的方法

.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;
}

---

示例：

如果在行周围使用包装器元素，则可以使用CSS

：last child

来处理右侧和底部的单元格

我假设您的包装器元素也是一个

：

但请注意，

：最后一个子项

不受IE8及更早版本的支持

您可能会更幸运地设置相反的边框（即顶部和左侧），并使用

：first child

来清空最左侧和最顶部的单元格，因为IE7和IE8支持

：first child

。最终结果将完全相同

您可以在此处找到有关CSS选择器浏览器支持的更多信息：

如果您需要使用

：last child

，并且需要支持IE7/8，那么您可以通过使用javascript库（例如）使其正常工作

然而，在所有这些之后，我还要说，给定我为行添加的包装器元素，我们最终得到了与HTML表相同的基本结构。所以问题是为什么不简单地使用一张桌子呢？然后可以使用

边框折叠

来获得类似的结果

关于最后一点，我知道你把“无桌”作为问题的标签，所以我假设你正在进行无桌设计。然而，如果数据实际上是表格形式的，那么使用表格也没有什么错。无表设计旨在阻止人们使用表进行任意页面布局，但在正确的上下文中使用表仍然是完全有效的。问题中的描述听起来很像你的例子属于这一类

---

希望这能有所帮助。

我想我找到了一个不使用额外类、CSS3选择器或包装器元素的解决方案。通过给容器一个

溢出：隐藏
，并稍微像这样移动单元格：

.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;
}

请参阅此处的示例：
如果这是“类似于表”，是否有不使用表的理由？这依赖于CSS3，对吗？与：first child
。
.cell {
    border-bottom:1px solid red;
    border-right:1px solid red;
}

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

.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;
}