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.

Other Items in css
Page Views

This page has been viewed 695 times.

Search Code
Search Code by entering your search text above.

This is my test area for webdev. I keep a collection of code snippits here, mostly for my reference. Also if i find a good site, i usually add it here.


Random Quote
Our brains are wired to find things we are looking for - if your always cynical or waiting for things to go wrong, then your life will reflect that. On the other hand, having a positive outlook on life will bring you joy and provide you with inspiration when you least expect it ☀️🍉🌴