I have a problem at adding a border above the footer. What should I read to solve this problem?
tfoot {
border-top: solid;
}
Hi @user-p and welcome to the community 
You need to collapse the borders of the table to do that.
table {
border-collapse: collapse;
}
I hope that helps 
Michael
1 Like
Hello @mikoMK, I appreciate your help. Now I can see what I actually expected.
By the way, as you may know, I thought tfoot {background-color: red} in the case of separate shows me the same as collapse. That is wrong, but the separate table shows me the color at least. So, I’m wondering why tfoot {border-top: solid;} in the case of separate doesn’t show me a table like tfoot td {border-top: solid;}. I’ve tried to check some results about <tfoot> and I feel margin doesn’t function. Does what I’ve seen mean <tfoot> in a separate table doesn’t have the area of border and margin(This mean “it has only padding”)*?
*CSS basics(CSS: all about boxes)
Tables have pretty complicated internal structures. All the parts of a table have their own display values with different rules. For example <tfoot> has display: table-footer-group which isn’t used by any other element. This is different for the most common display values like inline or block which are shared by many elements.
What I try to say: The behavior you see is just something that was defined when those table elements were created a long time ago. The designers may have thought: "When a table has border-collapse: separate every cell is on its own and it doesn’t make sense to additionally allow borders on a cell group like <tfoot>"
It is similar with margin. The CSS specification disallows margin on all elements inside a table. Same goes for padding with the exception of table cells.
Conclusion
The parts of HTML tables have different rules than other elements like <div> or <span> and therefore styles can have different effects on them.
1 Like
Thank you for your kind reply, I keep that in mind.
1 Like