如何用CSS來控製表格嵌套？CSS控製表格嵌套執行個體代碼

網頁設計應用中，當我們不能完全放棄表格的使用時，為了達到預期的效果，不免要用到表格嵌套（特別是多層嵌套）方式來進行布局。可能很多同仁都遇到過這樣的問題，為了達到顯示效果要為每一個（每一層）的表格寫不同的CSS代碼或加不同的屬性值。這樣寫出來的代碼可讀性非常差，不便修改和管理。學會用CSS中的偽類這個問題就迎刃而解了，看一看我的處理方法吧。

1. [圖片] table.jpg

2. [代碼]

<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. [代碼]

<!--IE6不支援CSS的偽類,要用jQuery來處理一下--><!--[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. [代碼]

<table width="50%" class="form-table" style="background:#CFF;">    <tr>   <td>            <table width="100%" style="background:#FFC;">                <tr>                    <td>&nbsp;</td>                    <td>&nbsp;</td>                </tr>                <tr>                    <td>&nbsp;</td>                    <td>&nbsp;</td>                </tr>            </table>        </td>        <td>&nbsp;</td>        <td>&nbsp;</td>    </tr>    <tr>        <td>&nbsp;</td>        <td>            <table width="100%" style="background:#CF9;">                <tr>                    <td>&nbsp;</td>                    <td>&nbsp;</td>                    <td>&nbsp;</td>                </tr>                <tr>                    <td>&nbsp;</td>                    <td>                        <table width="100%" style="background:#FFC;">                            <tr>                                <td>&nbsp;</td>                                <td>&nbsp;</td>                            </tr>                            <tr>                                <td>&nbsp;</td>                                <td>&nbsp;</td>                            </tr>                        </table>                    </td>                    <td>&nbsp;</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;</td>                </tr>                <tr>                    <td>&nbsp;</td>                    <td>&nbsp;</td>                </tr>            </table>        </td>    </tr></table>