Kevin Powell - CommunityKP-C
Kevin Powell - Community•10mo ago•
24 replies
bonzo

Lining up table header borders with table body borders

I'm going through codecademy's Full Stack Dev course. The project I'm on currently is to develop a cheat sheet which includes a table.

I want to have it such that the "borders" in the table head row line up vertically with those in the body column, with those in the head row inheriting the background colour, and those in the body taking the assigned rgb.

It currently looks like the picture. Here is my CSS code: 

/* Body */
header {
    text-align: center;
}

header h1 {
    font-family: "Sigmar", serif;
    font-size: 60px;
    margin-bottom: 1px;
}

nav {
    margin-top: 0px;
}

nav li {
    display: inline-block;
    font-family: Arial, Helvetica, sans-serif;
    color: midnightblue;
    width: 250px;
    font-weight: 600;
}

table {
    border: 3px solid rgb(255, 182, 193);
    border-collapse: separate;
    border-spacing: 2px;
}

thead th {
    background-color: rgb(255, 182, 193);
    border-left: 2px;
}

tbody td {
    border-left: 2px solid rgb(255, 182, 193)
}

Probably forgetting something really stupid. Any help massively appreciated.
image.png
Was this page helpful?