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