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:

Reference content is as follows:
<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.

Reference content is as follows:

<Div style = "padding: 10px;">
<Table class = "dir">
<Tr>
<TH width = "80"> project name </Th>
<TH width = "20"> result </Th>
<TH width = "220"> remarks </Th>
</Tr>
<Tr>
<TD> PHP version </TD>
<TD bgcolor = "#60bf60"> pass </TD>
<TD> PHP 5.1.0 or later is required. </TD>
</Tr>
<Tr>
<TD> Dom extension module </TD>
<TD bgcolor = "#60bf60"> pass </TD>
<TD> </TD>
</Tr>
<Tr>
<TD> PDO extension module </TD>
<TD bgcolor = "#60bf60"> pass </TD>
<TD> </TD>
</Tr>
<Tr>
<TD> PDO MySQL extension module </TD>
<TD bgcolor = "#60bf60"> pass </TD>
<TD> This is required if you are using a MySQL database. </TD>
</Tr>
<Tr>
<TD> memcache extension module </TD>
<TD bgcolor = "#60bf60"> pass </TD>
<TD> </TD>
</Tr>
<Tr>
<TD> soap extension module </TD>
<TD bgcolor = "#60bf60"> pass </TD>
<TD> & nbsp; </TD>
</Tr>
<Tr>
<TD> GD extension with <br/>
FreeType support </TD>
<TD bgcolor = "#60bf60"> pass </TD>
<TD> & nbsp; </TD>
</Tr>
</Table>
<Div style = "padding-top: 8px; "> <a href ="/requirements/"target =" _ blank "class =" easyui-linkbutton "> click to View Details </a> & nbsp; <a href = "javascript: void (0);" onclick = "$. cookie ('portal-state', null); $. messager. show ({Title: 'hprompt ', MSG:' initialization successful! Please refresh the page! '}); "Class =" easyui-linkbutton "> restore the initial portal order </a> </div>
</Div>

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

Reference content is as follows:

<Style>
. Dir {width: 100%; border-left: # e2e2e2e2 solid 1px; border-top: # e2e2e2 solid 1px; border-collapse: collapse ;}
. Dir caption {text-align: Left; font-size: 14px ;}
. Dir Th {background-color: # e2e2e2 ;}
. Dir TD {border-Right: # e2e2e2 solid 1px; border-bottom: # e2e2e2 solid 1px; Vertical-align: Top; padding: 2px ;}
</Style>

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.