• 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>
  • 相关阅读:
    Linux免密登录
    HDFS shell 常用命令
    zabbix4.4图表中文显示乱码解决办法
    安装zabbix-agent
    安装配置zabbix4.4
    elasticsearch插件sql安装
    dedecms调用头部文件 dede:include时页面出现一行空白的解决方案
    DedeCMS <=5.7 SP2 file_class.php 任意文件上传漏洞
    DedeCMS后台文件任意上传漏洞media_add.php的修改方法
    织梦DEDECMS任意文件上传漏洞与注入漏洞修复方法
  • 原文地址:https://www.cnblogs.com/xkzy/p/3927661.html
Copyright © 2020-2023  润新知