Question

我正在尝试创建一个简单的3x3网格（使用<table>），所有单元格都有1px边框。如果我只是使用CSS为所有<td>元素提供1px边框，那么内部边框将堆叠并创建2px边框，因此我会以不同的方式处理每个<td>。我成功地这样做并使用nth子来减少CSS。但是，我的问题是为什么使用更少CSS选择器的某种逻辑方式不起作用。

这是我的HTML

<!DOCTYPE html>
<html>
<head>
    <title>3x3 grid</title>
    <link rel="stylesheet" type="text/css" href="style.css">
</head>
<body>
<table>
    <tr>
        <td>1</td>
        <td>1</td>
        <td>1</td>
    </tr>
    <tr>
        <td>1</td>
        <td>1</td>
        <td>1</td>
    </tr>
    <tr>
        <td>1</td>
        <td>1</td>
        <td>1</td>
    </tr>
</table>
</body>
</html>

这是有效的CSS：

td{
    border: 1px #000;
    width:30px;
    height: 30px;
    text-align: center;
    border-style: solid;
}
tr:nth-child(2) td{
    border-top: 0px;
}
tr:nth-child(3) td{
    border-top: 0px
}
td:nth-child(1){
    border-right: 0px;
}
td:nth-child(3){
    border-left: 0px;
}
table{
    border-spacing: 0px;
    border-collapse: separate;
}

这是使用少一个选择器的CSS，应该可以工作，但不知何故，所有上层单元格都没有顶部边框。

td{
    border: 1px #000;
    border-top: 0px;
    width:30px;
    height: 30px;
    text-align: center;
    border-style: solid;
}
tr:nth-child(1) td{
    border-top: 1px;
}
td:nth-child(1){
    border-right: 0px;
}
td:nth-child(3){
    border-left: 0px;
}
table{
    border-spacing: 0px;
    border-collapse: separate;
}

我用Safari和Firefox测试过它。还请告诉我是否有更好的方法。

Answer 1

您td上没有上边框的原因是因为您没有声明border-style或border-color ...

tr:nth-child(1) td{
    border-top: 1px;
}

应该是......

tr:nth-child(1) td{
    border-top: 1px solid #000;
}

只需使用border-collapse: collapse

即可简化此操作

td{
    border: 1px #000;
    width:30px;
    height: 30px;
    text-align: center;
    border-style: solid;
}

table{
    border-collapse: collapse;
}

<table>
    <tr>
        <td>1</td>
        <td>1</td>
        <td>1</td>
    </tr>
    <tr>
        <td>1</td>
        <td>1</td>
        <td>1</td>
    </tr>
    <tr>
        <td>1</td>
        <td>1</td>
        <td>1</td>
    </tr>
</table>

Answer 2

我不知道为什么，但第一行中的tr:nth-child(1) td{ border-top: solid black 1px; }已从固定变为无。尝试使用：

updatedXML.xmlentity

CSS中的

应该是正确的。 http://jsfiddle.net/u1d1ctcy/

Answer 3

您只需通过以下代码执行此操作：

<style>
    table {
        border-collapse: collapse;
          }

    table, td, th {
        border: 1px solid black;
         }
 </style>

CSS嵌套的nth-child（）表现得很奇怪

3 个答案: