HTML表格單元格沒有正確對齊

我有以下HTML表格：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的基本原理。

來源

2010-04-06 Yuval Adam

這些欄是單元格間距和填充。

您需要將分割的背景設置爲gif文件的顏色。該空白區域是單元格周圍的填充。

您還可以在表格定義中設置cellpadding ='0'和cellspacing ='0'。默認值分別是1和2。不過，我建議不要這樣做，因爲它可能會導致數據承載行出現問題。

來源

2010-04-06 13:27:33 HerbN

您會看到默認間距。修復：

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

來源

2010-04-06 13:27:20 fuxia

table{border-collapse:collapse;}

需要刪除表格的邊框...

來源

2010-04-06 13:29:52 Sunny

HTML表格單元格沒有正確對齊

回答

相關問題