zoukankan      html  css  js  c++  java
  • CSS控制表格嵌套

    1. [图片] table.jpg    


    ​2. [代码]用CSS处理表格嵌套完整代码     

    <style type="text/css">
    .form-table{
        border-collapse:collapse;
        border-spacing:0px;
        border-style:solid solid solid solid;
        border-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-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>
  • 相关阅读:
    洛谷P2577 午餐【贪心】【线性dp】
    洛谷P1169 棋盘制作【悬线法】【区间dp】
    洛谷1546 最短网络Agri-Net【最小生成树】【prim】
    洛谷P1144 最短路计数【堆优化dijkstra】
    洛谷P1339 热浪【最短路】
    洛谷P1273 有线电视网【树形dp】
    洛谷P2279 消防局的设立【树形dp】
    洛谷P1220 关路灯【区间dp】
    洛谷P1341 无序字母对【欧拉路】【dfs】
    洛谷P1330 封锁阳光大学【dfs】
  • 原文地址:https://www.cnblogs.com/xkzy/p/3927661.html
Copyright © 2011-2022 走看看