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

删除表格边框需要

...

HTML表格单元格未正确对齐

3 个答案: