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;
}

知道為什么會這樣嗎？

而不是獲得帶有圓角的漂亮表頭，而是得到單元格之間的怪異間隙。 差距從何而來？ 除了解決這個丑陋的問題之外，我還想了解為什么所有瀏覽器都以這種方式呈現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;}

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