CSS removes default spacing for tables and produces 1px of thin sheets

Css

Now in the so-called "div+css" atmosphere, many people give up the form, in fact, should let each label make the most of it, in the performance data, we should still use table. However, when we create a table, we find that it has some default styles, such as the spacing between cell TD, so we usually start with this:

<table border= "0" cellspacing= "0" cellpadding= "0" >

In the page, use the cellspacing= "0" to eliminate this spacing and merge the borders. Now, we're going to have a clean form table.

<table class= "dir" >
<caption> How to remove the spacing of table default styles through CSS </caption>
<tr>
<th>test</th>
<th>test</th>
<th>test</th>
</tr>
<tr>
<td>test</td>
<td>test</td>
<td>test</td>
</tr>
</table>

All we have to do is give this table a border-collapse:collapse style and we can do it.

. 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;p adding : 10px 10px 6px;vertical-align:top;}

In this way, we have achieved the desired effect, and the CSS style above also defines the form table as a 1px thin table.

In the absence of an internal style definition of the table, and through the stylesheet, successful removal of the TD default Spacing, as well as a thin table defined as 1 pixels. Really do the separation of structure and performance.