下面简洁的代码就可以实现table border 1px
<!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-Type" content="text/html; charset=utf-8" />
<style type="text/css">
<!--
html,* { margin:0px; padding:0px; }
table { border-collapse:collapse; }
td { padding: 0px 3px; }
-->
</style>
</head>
<body>
<table border="1" borderColor="#000000">
<tbody>
<tr>
<td>abc</td>
<td>abc</td>
<td>abc</td>
<td>abc</td>
</tr>
<tr>
<td>abc</td>
<td>abc</td>
<td>abc</td>
<td>abc</td>
</tr>
</tbody>
</table>
</body>
</html>
如果要使用固定列宽，一般会给table加上table-layout:fixed，然后把第一行的行高设置为0(虽然为0，但实际上应该是和第二行重叠，只是看起来就像消失了一样)，然后用第一行来设置列宽，如下代码
<!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-Type" content="text/html; charset=utf-8" />
<style type="text/css">
<!--
html,* { margin:0px; padding:0px; }
table { border-collapse:collapse; table-layout:fixed; }
td { padding: 0px 3px; }
.firstRow { height:0px; }
.firstRow td { height:0px; }
-->
</style>
</head>
<body>
<div style="margin:10px;">
<table border="1" borderColor="#000000">
<tbody>
<tr class="firstRow">
<td style="width:80px;"></td>
<td style="width:100px;"></td>
<td style="width:120px;"></td>
<td style="width:140px;"></td>
</tr>
<tr>
<td>abc</td>
<td>abc</td>
<td>abc</td>
<td>abc</td>
</tr>
<tr>
<td>abc</td>
<td>abc</td>
<td>abc</td>
<td>abc</td>
</tr>
</tbody>
</table>
</div>
</body>
</html>
上面代码，除IE6、IE7外，都已经实现想要的效果了，但.........IE6、IE7下却....看图
IE8
此时为第一行添加display:none属性，问题就解决了，没错，你没看错，就是display
.firstRow { *display:none; } 注意前面的“*”号，这个符号只有IE7以下版本支持，其他浏览器是不支持的，而刚好这种现象只有IE7以下版本才存在...
<!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-Type" content="text/html; charset=utf-8" />
<style type="text/css">
<!--
html,* { margin:0px; padding:0px; }
table { border-collapse:collapse; table-layout:fixed; }
td { padding: 0px 3px; }
.firstRow { height:0px; }
.firstRow td { height:0px; }
/*---ie6、ie7---*/
.firstRow { *display:none; }
-->
</style>
</head>
<body>
<div style="margin:10px;">
<table border="1" borderColor="#000000">
<tbody>
<tr class="firstRow">
<td style="width:80px;"></td>
<td style="width:100px;"></td>
<td style="width:120px;"></td>
<td style="width:140px;"></td>
</tr>
<tr>
<td>abc</td>
<td>abc</td>
<td>abc</td>
<td>abc</td>
</tr>
<tr>
<td>abc</td>
<td>abc</td>
<td>abc</td>
<td>abc</td>
</tr>
</tbody>
</table>
</div>
</body>
</html>
看一下最终效果，和IE8的一样了吧
