Home  >  Article  >  Web Front-end  >  How to control table nesting with CSS? CSS control table nested example code

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

零下一度
零下一度Original
2017-04-26 17:10:353221browse

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

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

##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!

Statement:
The content of this article is voluntarily contributed by netizens, and the copyright belongs to the original author. This site does not assume corresponding legal responsibility. If you find any content suspected of plagiarism or infringement, please contact admin@php.cn