如何用CSS来控制表格嵌套？CSS控制表格嵌套实例代码

程序员文章站 2022-04-25 14:33:28

...

网页设计应用中，当我们不能完全放弃表格的使用时，为了达到预期的效果，不免要用到表格嵌套（特别是多层嵌套）方式来进行布局。可能很多同仁都遇到过这样的问题，为了达到显示效果要为每一个（每一层）的表格写不同的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>

以上就是如何用CSS来控制表格嵌套？CSS控制表格嵌套实例代码的详细内容，更多请关注其它相关文章！