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

Answer 2

首先，请小心你的图像。第二，你可以添加这个

border:hidden;

表格样式属性中的

。

第三，这个问题出现在所有浏览器中吗？

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

2 个答案: