Kevin Powell - Community•6d ago

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)
}

/* 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.

15 Replies

Chris Bolson•6d ago

If the table head and table body all form part of the same table, the borders will line up automatically. I notice in your code that you haven't defined a style or color for the thead th borders. You need to define these for the border to appear.

ἔρως•6d ago

why do you have border-collapse set to separate and then a border-spacing?

bonzoOP•6d ago

Hello both, thanks for the replies. @ἔρως I think this is an area where I was lacking understanding. It was a (clumsy) attempt at instituting spacing. Would the border-spacing override the border-collapse?

ἔρως•6d ago

no, it will just add weird spacing the main problem is that you have border-left without collapsing borders and with a border spacing just collapse the borders, put the borders on all sides, use padding in the td or th and for the outside, just use a white border and pink background with padding or margin, depending on what works oh, and on the top, use white borders

Jochem•6d ago

table cells are weird. The white bit between the THs isn't the border that's defined with the css border property

ἔρως•6d ago

it's the border spacing

Jochem•6d ago

border-left: 2px doesn't do anything unless you also define a color and a fill type

ἔρως•6d ago

good catch

Jochem•6d ago

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

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

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

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

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

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

Jochem•6d ago

ἔρως•6d ago

dont forget the white and pink outside the table

Jochem•6d ago

is that even intentional?

ἔρως•6d ago

🤔 :think: maybe not but looks good at least to my bad designer self

bonzoOP•6d ago

Excellent, thank you all

ἔρως•6d ago

tables are a huge pita, you wont work with these a ton

Gaming

Programming

Lining up table header borders with table body borders

Did you find this page helpful?