<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www./TR/xhtml1/DTD/xhtml1-transitional.dtd"> <html xmlns="http://www./1999/xhtml"> <head> <meta http-equiv="Content-Type" content="text/html; charset=gb2312" /> <title>定义表格边框的方法</title> <style> table{ border-collapse:collapse; } td{ border:#ccc solid 1px; padding:5px; } </style> </head>
<body> <table width="100%" border="0" cellspacing="0" cellpadding="0"> <tr> <td>今天学了个新方法,奉献给大家</td> <td>以前都是定义table的上边和左边,然后定义td的右边和下边</td> <td>没想到还有这么简便的方法,以后就用这个方法了</td> </tr> <tr> <td>标准之路</td> <td>www.aa25.cn</td> <td>欢迎大家来访问</td> </tr> <tr> <td> </td> <td> </td> <td> </td> </tr> </table> </body> </html>
table width=1 就已经把宽度设置为 1 了 我们面临的问题是这样的,每一个 td 边线都是 1px,table 边线也是 1px。那么当两个td相邻的时候,因为每个 td 边线都是1,所以靠进的时候边线的“宽度和”就是 1+1=2。当 td 和 table 相邻时,同样。
collapse : 相邻边被合并 相邻边被合并!以前我说的 1+1=2 就是因为 td 和td之间,td 和table 之间相邻边的问题。默认时相邻边没有合并,所以就是 1+1=2。现在我们使用 border-collapse:collapse把我们合并了,所以宽度还是 1px。也就是出现细线边框了
|