Assessment help needed for Tables Task#1

MDN Learn
#1

Challenge: https://developer.mozilla.org/en-US/docs/Learn/CSS/Building_blocks/Tables_tasks#task

Solution

table {
 border-top: 1.5px solid #eee;
 border-bottom: 1.5px solid #eee;

}

table tfoot{
  border-top: 1.5px solid #eee;
}


tr th:nth-child(n),td:nth-child(n) {
  text-align: left;
}

tr th:nth-child(3),td:nth-child(3) {
  text-align: right;
}

tbody tr:nth-child(2n-1) {
 background-color: #eee;
}

With the above solution why does applied border on “tfoot” element does not work. It works if I apply the following on the “table” element. Any reason why?

table-collapse: collapse;

Thanks,

Assessment needed for Test Your Skills - Styling Tables
#2

Hi @shivang_trivedi

I am fairly new to coding. I cant find anything called table-collapse in MDN. Could you clarify what you mean? is it perhaps border-collapse?

#3

Hi Ran,
Yes, I meant border-collapse.
Thanks,

#4

Hi Shivang,

Thats a great question. I cannot find a direct answer to why it works only when border-collapse is set to collapse. My hunch is that a table element would be a box in itself and then the td (table data) and tr (table row) would creat boxes within this. Each would have its own border. The table having a bigger outer border while the td and tr their own.

I noticed taht I cpoould target just the top and bottom borders of of the tfoot with the followin code

table tfoot th,

        table tfoot td {
        border-top: 1.5px solid black;
        border-bottom: 1.5px solid black;
        }

with border-collapse set to separate this would look like the below

Screen Shot 2021-04-28 at 10.47.34

now if I am also going to add the following code

        table  {
            border-bottom: 1.5px solid black; 
        }

What I see is this
Screen Shot 2021-04-28 at 10.49.15

However if we were to have a border top for the table it would be right at the top. I can only demonstrate how it works but not the reason behind it. As I said I think a table, td and tr act like boxes within boxes.

enjoy you studies :sunglasses:

2 Likes