Removing table lines and table space between cells in css

Question

I have this site: http://redditlist.com/dir/1026 and I\'m stuck on trying to remove spacing between cells so it will look more like this: http://redditlist.com.

Answer 1

Use the border-collapse CSS property to remove space between cells:

table {
    border-collapse: collapse;
}

You see spacing between table cells by default because each cell has its own border, the cells don't share borders. This is called "the separated model", as explained in the Mozilla Developer CSS Reference:

The separated model is the traditional HTML table border model. Adjacent cells each have their own distinct borders. The distance between them given by the border-spacing property.

You can "remove" the spacing between the cells by making them share borders with each other, which is known as the "collapsed border model":

In the collapsed border model, adjacent table cells share borders.