Question

我创建了一个页面，它是三个独立网站的登录门户。在此页面上，我向所述网站显示了三个登录门户。我试图用css和尽可能少的课程来设计它（我需要微调我的CSS技能）。

我创建的是一个包含三行和两列的表，名为loginPortals：

<table class="loginPortals">
    <tbody>
        <tr>
            <td>Picture 1</td>
            <td>Login form 1</td>
        </tr>
        <tr>
            <td>Picture 2</td>
            <td>Login form 2</td>
        </tr>
        <tr>
            <td>Picture 3</td>
            <td>Login form 2</td>
        </tr>
    </tbody>
</table>

我刚刚开始制作桌子的样式，所以它非常不完整，但我已经在努力了。这是简化的，因为我不确切地知道它的外观。基本上，我想在每一行之间出现某种边界。以下并没有达到我想要的目的：

.loginPortals{
    width:100%;
}
    .loginPortals tbody:first-child td{
        border-top:1px solid #000;
    }
    .loginPortals tbody tr td{
        border-bottom:1px solid #000;
        padding:1em 0;
    }

第一个孩子选择器没有像我想象的那样工作。它将顶部边框应用于所有行中的所有单元格。这导致线条厚度在行的中间加倍。

如何解决此问题，以便顶部边框仅应用于顶行而不创建额外的类或应用任何内联样式。

谢谢！乔

Answer 1

您的桌边框需要设置为折叠：

.loginPortals{
    width:100%;
    border-collapse: collapse;
}

然后，您可以省略:first-child规则，只为所有行应用顶部和底部边框：

.loginPortals tbody tr td{
    border-top:1px solid #000;
    border-bottom:1px solid #000;
    padding:1em 0;
}

此外，仅供您参考，此选择器：

.loginPortals tbody:first-child td

意思是：

选择任何td元素
在tbody内这是其父母的第一个孩子。

而不是：

选择任何td元素
在tbody的第一个孩子中。

因为tbody是.loginPortals的第一个也是唯一的孩子，所以td个父母中的所有tr元素都会被选中。有关直观说明，请参阅this answer。你可能想要这个选择器：

.loginPortals tbody tr:first-child td

但这不是必要的，因为您只需要折叠表格边框。

Answer 2

如果我理解正确，你有3个表格，只想要两行 - 这就是我从I want a border of some sort appearing between each row那里拿的话，如果是这样，试试这个。

.loginPortals tr:first-child td{
    border-top:none;
}
.loginPortals tbody tr td{
    border-top:1px solid #000;
    padding:1em 0;
}

http://jsfiddle.net/u4v3Z/

Answer 3

我相信这会奏效......

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

Answer 4

首先，如果你想提高你的CSS技能，你应该立即停止使用表格进行布局。

其次，:first-child伪类会影响父元素的第一个子元素。因此，由于您只有一个tbody元素，而且table写作tbody或tbody:first-child的第一个孩子会产生相同的结果。

编辑：我认为您在此之后的内容是tr:first-child td（您只希望第一个表格行中的表格单元格具有顶部边框）。

要解决您的问题，您可以在所有border-bottom上使用td，除非您需要在顶部设置边框，在这种情况下您可以在实际{{1您可以提供所有table sa td 和 border-top。或。这当然会在您描述时呈现双边框，但您可以使用border-bottom折叠表格的边框。

简而言之：border-collapse: collapse。但是不要使用表格进行布局。

表中的第一个子选择器

4 个答案: