CSS removes the default table spacing and creates a 1px line table.

Now, in the so-called "div + css" atmosphere, many people give up the table, in fact, we should make the best use of each tag, where the data is presented, we should still use the table. However, when creating a table, we will find that it has some default styles. For example, there is a gap between the cell td, so we usually start with this:

The code is as follows:	Copy code
<Table border = "0" cellspacing = "0" cellpadding = "0"> In the page, use cellspacing = "0" to remove the spacing and merge the border. Now, we need a clean table. <Table class = "dir"> <Caption> How to use CSS to remove the spacing of default table styles </caption> <Tr> <Th> test </th> <Th> test </th> <Th> test </th> </Tr> <Tr> <Td> test </td> <Td> test </td> <Td> test </td> </Tr> </Table>

We only need to give this table a border-collapse: collapse style to achieve this effect.

The code is as follows:	Copy code
. Dir {width: 100%; border-left: # C8B9AE solid 1px; border-top: # C8B9AE solid 1px; border-collapse: collapse ;} . Dir td {width: 25%; border-right: # C8B9AE solid 1px; border-bottom: # C8B9AE solid 1px; background-color: # D7D1CB; padding: 10px 10px 6px; vertical-align: top ;}

In this way, we have achieved the desired effect, and the css style above also defines the table as a 1px line table.
Without the internal style definition of the table, the style table is used to successfully remove the default td spacing and a line table defined as 1 pixel. Truly achieves the separation of structure and performance.