CSS 表格矩阵上的边框样式，无需额外的类

Question

我正在仅使用 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>

为了控制边框样式的应用位置，我使用 .last 和 .right 类来省略边缘上的边框样式：

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

我想知道是否有人有一种技术我实现了相同的结果/逻辑 - 但不需要额外的类。

感谢您的帮助！

Answer 1

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

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

Answer 2

这是使用 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/

Answer 3

如果您在行周围使用包装元素，则可以使用 CSS :last-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;
}

但请注意，IE8 及更早版本不支持 :last-child。

您可能会更幸运地设置相反的边框（即顶部和左侧），并使用 :first-child 来清空最左侧和最顶部的单元格，因为 :first-child > IE7 和 IE8 支持。最终结果将完全相同。

您可以在此处找到有关浏览器对 CSS 选择器支持的更多信息：http://quirksmode.org/css/contents。 html

如果您需要使用 :last-child，并且您需要支持 IE7/8，那么您也许可以通过使用 javascript 库（例如 选择性。

然而，毕竟，我还要说，鉴于我为行添加的包装器元素，我们最终得到与 HTML 表相同的基本结构。那么问题是为什么不简单地使用表格呢？然后您可以使用 border-collapse 来实现类似的结果。

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

希望有帮助。

Answer 4

我想我找到了一个不使用额外的类、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/