web标准下FF与IE对表格边框和宽度的不同解析测试

<?xml version="1.0" encoding="gb2312"?> <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <html xmlns="http://www.w3.org/1999/xhtml"> <head> <meta http-equiv="Content-Language" content="zh-cn" /> <meta http-equiv="Content-Type" content="text/html; charset=gb2312" /> </head> <body> <p style="font-weight:bold;">--table--</p> <p>separate，表格边框包含在 width 中。</p> <table cellspacing="0" cellpadding="0" style="width:100px;border:10px solid red;border-collapse:separate;"> <tr> <td> </td> </tr> </table> <table cellspacing="0" cellpadding="0" style="border-collapse:collapse;"> <tr> <td style="width:100px;background-color:#999900;color:white;text-align:center;">100px</td> </tr> </table> <p>collapse，表格边框被平均分为“内边框”、“外边框”，“内边框”包含在 width 中，“外边框”不包含在 width 中，“外边框”不占空间。</p> <table cellspacing="0" cellpadding="0" style="width:100px;border:10px solid red;border-collapse:collapse;"> <tr> <td> </td> </tr> </table> <table cellspacing="0" cellpadding="0" style="border-collapse:collapse;"> <tr> <td style="width:5px;background-color:#009900;"></td> <td style="width:90px;background-color:#999900;color:white;text-align:center;">90px</td> <td style="width:5px;background-color:#009900;"></td> </tr> </table> <p>collapse，当边框无法平均分为两份时，左边框的“外边框”等于“内边框”加 1，右边框则相反。</p> <table cellspacing="0" cellpadding="0" style="width:100px;border:1px solid red;border-collapse:collapse;"> <tr> <td> </td> </tr> </table> <table cellspacing="0" cellpadding="0" style="border-collapse:collapse;"> <tr> <td style="width:0px;background-color:#009900;"></td> <td style="width:99px;background-color:#999900;color:white;text-align:center;">99px</td> <td style="width:1px;background-color:#009900;"></td> </tr> </table> <p style="font-weight:bold;">--td--</p> <p>collapse，未指定 table 宽度时，td 的边框不占用 td 的 width。</p> <table cellspacing="0" cellpadding="0" style="border-collapse:collapse;"> <tr> <td style="width:100px;border:1px solid red;"> </td> <td style="width:100px;border:1px solid red;"> </td> </tr> </table> <table cellspacing="0" cellpadding="0" style="border-collapse:collapse;"> <tr> <td style="width:100px;background-color:#999900;color:white;text-align:center;">100px</td> <td style="width:1px;background-color:#009900;"></td> <td style="width:100px;background-color:#999900;color:white;text-align:center;">100px</td> </tr> </table> <p>collapse，指定 table 宽度时，td 边框的解释同 table。</p> <table cellspacing="0" cellpadding="0" style="width:200px;border-collapse:collapse;"> <tr> <td style="width:100px;border:1px solid red;"> </td> <td style="width:100px;border:1px solid red;"> </td> </tr> </table> <table cellspacing="0" cellpadding="0" style="border-collapse:collapse;"> <tr> <td style="width:99px;background-color:#999900;color:white;text-align:center;">99px</td> <td style="width:1px;background-color:#009900;"></td> <td style="width:99px;background-color:#999900;color:white;text-align:center;">99px</td> <td style="width:1px;background-color:#009900;"></td> </tr> </table> </body> </html>
[Ctrl+A 全部选择提示：你可先修改部分代码，再按运行]

注意：本实例主要适用于FF。

*table 与 td 边框重叠问题*

在样式表中同时为table标签和td标签指定边框，边框是否重叠取决于border-collapse属性。例如：