Первый -дочерний селектор в таблице

Я создал страницу, которая является порталом для входа на три отдельных веб-сайта. На этой странице я показал три портала входа на указанные веб-сайты. Я пытаюсь стилизовать все это с помощью 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;
    }

Первый дочерний селектор -не работает, как я думал. Он применяет верхнюю границу ко всем ячейкам во всех строках. Это приводит к тому, что толщина линии удваивается в середине строк.

Как исправить, чтобы верхняя граница применялась только к верхней строке без создания дополнительных классов или применения любого встроенного стиля.

Спасибо!
Джо

0
задан BoltClock 24 April 2012 в 16:11
поделиться