How to control table nesting with CSS? CSS control table nested example code

In web design applications, when we cannot completely give up the use of tables, in order to achieve the desired effect, we must use Go to table nesting (especially multi-level nesting) for layout. Many colleagues may have encountered this problem. In order to achieve the display effect, it is necessary to write different CSS codes or add different attribute values ​​​​for each (each layer) table. The code written in this way has very poor readability and is inconvenient to modify and manage. This problem will be easily solved once you learn to use pseudo-classes in CSS. Let’s take a look at my solution.

1. [Picture] 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不支持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. [Code]

<table width="50%" class="form-table" style="background:#CFF;">
    <tr>
   		<td>
            <table width="100%" style="background:#FFC;">
                <tr>
                    <td> </td>
                    <td> </td>
                </tr>
                <tr>
                    <td> </td>
                    <td> </td>
                </tr>
            </table>
        </td>
        <td> </td>
        <td> </td>
    </tr>
    <tr>
        <td> </td>
        <td>
            <table width="100%" style="background:#CF9;">
                <tr>
                    <td> </td>
                    <td> </td>
                    <td> </td>
                </tr>
                <tr>
                    <td> </td>
                    <td>
                        <table width="100%" style="background:#FFC;">
                            <tr>
                                <td> </td>
                                <td> </td>
                            </tr>
                            <tr>
                                <td> </td>
                                <td> </td>
                            </tr>
                        </table>
                    </td>
                    <td> </td>
                </tr>
                <tr>
                    <td> </td>
                    <td> </td>
                    <td> </td>
                </tr>
            </table>
        </td>
        <td> </td>
    </tr>
    <tr>
        <td> </td>
        <td> </td>
        <td>
            <table width="100%" style="background:#FFC;">
                <tr>
                    <td> </td>
                    <td> </td>
                </tr>
                <tr>
                    <td> </td>
                    <td> </td>
                </tr>
            </table>
        </td>
    </tr>
</table>

The above is the detailed content of How to control table nesting with CSS? CSS control table nested example code. For more information, please follow other related articles on the PHP Chinese website!