How do I use CSS to control table nesting? CSS Control Table Nesting instance code

In web design applications, when we cannot completely abandon the use of the table, in order to achieve the desired effect, it is unavoidable to use the table nesting (especially multi-layered nesting) way to layout. Many colleagues may have encountered such a problem, in order to achieve the display effect for each (each layer) of the table to write different CSS code or add different property values. This writing code is very poor readability, inconvenient to modify and manage. Learn to use CSS in the pseudo-class This problem is solved, take a look at my treatment method it.

1. [image] table.jpg

2. [code]

<style type= "Text/css" >.form-table{border-collapse:collapse;border-spacing:0px;border-style:solid Solid Solid solid;border-width:1px;border-color: #000000;}. Form-table table{border-collapse:collapse;border-spacing:0px;}. Form-table Td{margin:0px;padding:0px;height:25px;line-height:25px;text-align:center;border-style:solid None None Solid;border-width:1px;border-color: #000000;}. form-table table Tr:first-child Td{border-top-style:none;}. form-table table tr Td:first-child{border-left-style:none;} </style>

3. [code]

<!--IE6 does not support the pseudo-class of CSS, use jquery to deal with--><!--[if IE 6]><script language= "javascript" src= "Jquery.js" > </script><script language= "javascript" >$ (document). Ready (function () {$ (". form-table Table tr: First-child TD "). CSS (" Border-top-style "," none "), $ (". form-table table TR td:first-child "). CSS (" Border-left-style "," None ");}); </script><! [endif]-->

4. [code]

<table width= "50%" class= "form-table" style= "background: #CFF;" > <tr> <td> <table width= "100%" style= "background: #FFC;" > <tr> <td>&nbsp;</td> <td>&nbsp;&                    lt;/td> </tr> <tr> <td>&nbsp;</td>        <td>&nbsp;</td> </tr> </table> </td> <td>&nbsp;</td> <td>&nbsp;</td> </tr> <tr> <td>&amp ;nbsp;</td> <td> <table width= "100%" style= "background: #CF9;" > <tr> <td>&nbsp;</td> <td>&nbsp;&                    lt;/td> <td>&nbsp;</td> </tr> <tr> <td>&nbsp;</td> <td> <table width= "100%" style= "background: #FF C; "                                > <tr> <td>&nbsp;</td> <td>&nbsp;</td> </tr> <tr&gt                                ;                            <td>&nbsp;</td> <td>&nbsp;</td> </tr> </table> </td> &LT;TD&GT;&AMP;NBSP;&L                    t;/td> </tr> <tr> <td>&nbsp;</td>            <td>&nbsp;</td> <td>&nbsp;</td> </tr> </table> </td> <td>&nbsp;</td> </tr> <tr>  <td>&nbsp;</td> <td>&nbsp;</td> <td> <table width= "100%" style= "background: #FFC;" > <tr> <td>&nbsp;</td> <td>&nbsp;&                    lt;/td> </tr> <tr> <td>&nbsp;</td> <td>&nbsp;</td> </tr> </table> </td> &lt ;/tr></table>