表格单元格中的 CSS 无边框背景图像

Question

我有一个单行表格，用于在网页顶部显示标题。该表有 3 个单元格，左侧和右侧带有静态图像。重复中间的图像以填充屏幕的宽度。这是我正在使用的代码:

<table style="width: 100%; border-collapse: collapse;">
<tr height="80" width="100%">
<td style="background-repeat:no-repeat; border:none" background="/images/left.png" width="690" />
<td style="background-repeat:repeat-x; background-position:middle" background="/images/middle.png" />
<td style="background-repeat:no-repeat; border:none" background="/images/right.png" width="190" />
</tr>
</table>

我要实现的是3张图片整齐对齐，没有任何边框。不幸的是，上面的代码不起作用。尽管大部分边框都消失了，但在左右表格单元格中的图像右侧仍然有一条 1 像素的线。

从左到右，图像的大小分别为 690x80、1x80 和 190x80，并且与单元格的大小相匹配，因此看不出为什么会有这条线。

希望能帮助您摆脱两个 1 像素的边框

Answer 1

添加cellpadding="0"到你的<table>标签。

或者，如果您想使用 CSS 执行此操作，请使用以下 CSS 规则:

table td,
table th{
    padding: 0;
}