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>