码迷,mamicode.com
首页 > Web开发 > 详细

CSS控制表格嵌套

时间:2014-08-21 18:57:14      阅读:217      评论:0      收藏:0      [点我收藏+]

标签:des   style   blog   http   color   java   os   io   

1. [图片] table.jpgbubuko.com,布布扣    

bubuko.com,布布扣
?2. [代码]用CSS处理表格嵌套完整代码     

<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来处理     

<!--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");
});http://www.enterdesk.com/special/shouhui/?
</script>手绘图片
<![endif]-->
4. [代码]表格引用CSS的方法非常简单     
<table width="50%" class="form-table" >
    <tr>
        <td>
            <table width="100%" >
                <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%" >
                <tr>
                    <td>&nbsp;</td>
                    <td>&nbsp;</td>
                    <td>&nbsp;</td>
                </tr>
                <tr>
                    <td>&nbsp;</td>
                    <td>
                        <table width="100%" >
                            <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%" >
                <tr>
                    <td>&nbsp;</td>
                    <td>&nbsp;</td>
                </tr>
                <tr>
                    <td>&nbsp;</td>
                    <td>&nbsp;</td>
                </tr>
            </table>
        </td>
    </tr>
</table>

CSS控制表格嵌套,布布扣,bubuko.com

CSS控制表格嵌套

标签:des   style   blog   http   color   java   os   io   

原文地址:http://www.cnblogs.com/xkzy/p/3927661.html

(0)
(0)
   
举报
评论 一句话评论(0
登录后才能评论!
© 2014 mamicode.com 版权所有  联系我们:gaon5@hotmail.com
迷上了代码!