table border collapse
I see this quite often when dealing with tables the border-collapse: collapse;
used on a table as so:
table { border-collapse: collapse; }
So what is the point of doing this?
It seems to help in the styling of the table, so if you add border collapse you can format the borders over the whole table, such as the following example.
Normal Table vs a border-collapse Table
Normal Table
.table-normal { border:1px solid #999; }
Some Data | Some Data | Some Data |
Some Data | Some Data | Some Data |
Collapse(d) Table
.table-collapse { border-collapse: collapse; border:1px solid #999; }
Some Data | Some Data | Some Data |
Some Data | Some Data | Some Data |
Lets see if they look the same one using border-collapse: collapse; and one not. It seems that they look the same.
I'll try adding a border to the bottom of the td elements on both.
Actually the global styles on this page seem to be over-riding the tests so ill have to move the table testing to a bare page to see how it reacts.
Here is the external table testing example
You can see on the collapsed table that the borders overlap the table rows rather than the normal table where the borders are seperated.