Assessment help needed for Tables Task#1

[shivang_trivedi (Shivang)]

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,

[Ran]

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?

[shivang_trivedi (Shivang)]

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

[Ran]

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

now if I am also going to add the following code

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

What I see is this

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