• CSS实现表格嵌套功能，因为IE6不支持CSS伪类,因此使用jQuery来配合处理一下效果更好，在有些时候，我们需要表格的嵌套功能，以显示更细分化的数据内容，来看一下我这个用CSS和jquery共同实现的表格嵌套吧，相信会很实用的。



<html>

<head>

<title> jquery+CSS控制表格嵌套</title>

<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>

<!--因为IE6不支持CSS伪类,所以这里要使用jQuery来处理一下-->

<!--[if IE 6]>

<script language="javascript" src="/ajaxjs/jquery1.3.2.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]-->

</head>

<body>

<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>

</body>

</html>