有以下“1像素左侧”错误的解决方法吗？
<!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" xml:lang="en">
<body>
<div style="padding: 50px">
<div style="border: 1px solid red">Table header info</div>
<table style="border: 1px solid green; border-collapse: collapse; width: 100%">
<tbody>
<tr>
<th>Col1</th>
<th>Col2</th>
</tr>
<tr>
<td>Hello</td>
<td>World</td>
</tr>
</tbody>
</table>
<div style="border: 1px solid red">Table footer info</div>
</div>
</body>
</html>
它看起来像这样：
有没有任何纯CSS解决方案？
编辑
我对我的表有点不清楚，所以这里是再次：
边界崩溃：
根据建议，使用cellspacing =“0”和没有border-collapse：
所以现在我的表内的边框是加倍的，但我想在我的表1px边框。
当我从表中删除1px边框结束于：
边框在我的桌子里仍然翻倍。
解决方法
移除边框合拢并改用cellpacing = 0。
<table style="border: 15px solid green; width: 100%" cellspacing="0">
它发生，因为当您设置border-collapse：collapse时，Firefox 2.0将边框放在tr的外部。其他浏览器把它放在里面。
在代码中将边框宽度设置为10px，以了解实际发生的情况。
编辑后OP编辑
你可以使用旧表“边界”技巧。设置表上的背景颜色。将td和th颜色设置为白色。 User cellsacing = 1;
table {background-color: green;width:100%;}
td,th{background-color:white;}
<div style="padding: 50px">
<div style="border: 1px solid red">Table header info</div>
<table cellspacing="1" >
<tbody>
<tr>
<th>Col1</th>
<th>Col2</th>
</tr>
<tr>
<td>Hello</td>
<td>World</td>
</tr>
</tbody>
</table>
<div style="border: 1px solid red">Table footer info</div>
</div>
