CSS控制表格嵌套

时间：2014-10-15 18:20:21 阅读：224 评论：0 收藏：0 [点我收藏+]

标签：style blog http color io os 使用 ar java

网页设计应用中，当我们不能完全放弃表格的使用时，为了达到预期的效果，不免要用到表格嵌套（特别是多层嵌套）方式来进行布局。可能很多同仁都遇到过这样的问题，为了达到显示效果要为每一个（每一层）的表格写不同的CSS代码或加不同的属性值。这样写出来的代码可读性非常差，不便修改和管理。学会用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-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. [代码]IE6不支持CSS的伪类,要用jQuery来处理



4. [代码]表格引用CSS的方法非常简单

<table width="50%" class="form-table" >
<tr>
<td>
<table width="100%" >
<tr>
<td> </td>
<td> </td>
</tr>
<tr>
<td> </td>
<td> </td>
</tr>
</table>
</td>
<td> </td>
<td> </td>
</tr>
<tr>
<td> </td>
<td>?http://www.huiyi8.com/xgmm/bizhi/?
<table width="100%" >
<tr>性感女美女壁纸
<td> </td>
<td> </td>
<td> </td>
</tr>
<tr>
<td> </td>
<td>
<table width="100%" >
<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%" >
<tr>
<td> </td>
<td> </td>
</tr>
<tr>
<td> </td>
<td> </td>
</tr>
</table>
</td>
</tr>
</table>

CSS控制表格嵌套

标签：style blog http color io os 使用 ar java

原文地址：http://www.cnblogs.com/xkzy/p/4026536.html

踩

(0)

评论一句话评论（0）

分享档案

更多>

2021年07月29日 (22)
2021年07月28日 (40)
2021年07月27日 (32)
2021年07月26日 (79)
2021年07月23日 (29)
2021年07月22日 (30)
2021年07月21日 (42)
2021年07月20日 (16)
2021年07月19日 (90)
2021年07月16日 (35)

周排行