HTML表格单元格没有正确对齐

Question

我有以下HTML表格：

<table style="width: 100%;"> 
<tr> 
    <td class="title_bar_left_border"></td> 
    <td class="title_bar_middle"></td> 
    <td class="title_bar_right_border"></td> 
</tr> 
</table> 

用下面的CSS规则：

.title_bar_left_border 
{ 
    BACKGROUND-IMAGE: url(tray_left.gif); 
    WIDTH: 3px; 
    HEIGHT: 24px; 
} 

.title_bar_right_border 
{ 
    BACKGROUND-IMAGE: url(tray_right.gif); 
    WIDTH: 3px; 
    HEIGHT: 24px; 
} 

.title_bar_middle 
{ 
    BACKGROUND-IMAGE: url(tray_middle.gif); 
    WIDTH: 100%; 
    BACKGROUND-REPEAT: repeat-x; 
    HEIGHT: 24px; 
} 

任何想法，为什么是这样的结果呢？非但没有带圆角的漂亮的表头

alt text http://i42.tinypic.com/24wx7qx.jpg

你得到的细胞之间的这种怪异的差距。差距从哪里来？除了解决这个丑陋的问题，我想了解为什么所有浏览器都以这种方式呈现HTML的基本原理。

Answer 1

这些栏是单元格间距和填充。

您需要将分割的背景设置为gif文件的颜色。该空白区域是单元格周围的填充。

您还可以在表格定义中设置cellpadding ='0'和cellspacing ='0'。默认值分别是1和2。不过，我建议不要这样做，因为它可能会导致数据承载行出现问题。

Answer 2

您会看到默认间距。 修复：

table 
{ 
    border-collapse: collapse; 
    border-spacing: 0; 
} 

Answer 3

table{border-collapse:collapse;} 

需要删除表格的边框...