CSS实现表格嵌套功能,因为IE6不支持CSS伪类,因此使用jQuery来配合处理一下效果更好,在有些时候,我们需要表格的嵌套功能,以显示更细分化的数据内容,来看一下我这个用CSS和jquery共同实现的表格嵌套吧,相信会很实用的。
<html>
<head>
<title> jquery+CSS控制表格嵌套</title>
<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>
<!--因为IE6不支持CSS伪类,所以这里要使用jQuery来处理一下-->
<!--[if IE 6]>
<script language="javascript" src="/ajaxjs/jquery1.3.2.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]-->
</head>
<body>
<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>
</body>
</html>