why doesn't table cellspacing work?

Question

I have tried every bit of tricks to make cellspacing:0; cellpadding:0; described in a css file to work but somehow the table doesn't accept this property but accepts while described inline as <table cellspacing="0" cellpadding="0">. That's painstaking.

Solution 1

The HTML attribute cellpadding=0 corresponds to setting padding: 0 on all cells (th and td elements) of the table.

The HTML attribute cellspacing generally corresponds to setting border-spacing on the table, but in the common special case cellspacing=0, you get much better browser coverage by setting border-collapse: collapse on the table. It makes adjacent borders collapse but also removes spacing between cells.

HTML attributes sometimes map to CSS properties, but in general, they are two different worlds, and the mapping is complicated (see partial description of the correspondence). In particular, CSS does not have properties like cellspacing and cellpadding.

Solution 2

Check this answer How to set cellpadding and cellspacing in CSS?

table { 
    border-spacing:0;
    border-collapse:collapse;
}