0

我创建了一个页面，它是三个独立网站的登录门户。在此页面上，我显示了上述网站的三个登录门户。我正在尝试使用 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;
    }

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

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

谢谢！
乔

4

4 回答 4

7

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

.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

方法：

选择 a 中作为其父级的第一个子级的任何td元素。
tbody

并不是：

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

因此，由于tbody是 的第一个也是唯一的孩子，因此将选择其所有父母中的.loginPortals所有td元素。tr请参阅此答案以获得直观的解释。你可能想要这个选择器：

.loginPortals tbody tr:first-child td

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

于 2012-04-24T16:16:21.507 回答
1

如果我理解正确，您有 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/

于 2012-04-24T16:18:10.927 回答
0

我相信这会奏效...

td {border-top:1px solid #000;}
于 2012-04-24T16:14:34.053 回答
0

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

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

编辑：我想你可能会在这里tr:first-child td（你只希望第一个表格行中的表格单元格有一个顶部边框）。

要解决您的问题，您可以只使用border-bottom所有tds，除非您还需要顶部边框，在这种情况下，您可以将该边框设置为实际边框，table 或者您可以提供所有tdsaborder-top 和 border-bottom. 正如您所描述的，这当然会呈现双边框，但您可以使用border-collapse: collapse.

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

于 2012-04-24T16:19:54.707 回答