我有一个单行表格,用于在网页顶部显示标题。该表有 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 像素的边框
最佳答案
添加cellpadding="0"
到你的<table>
标签。
或者,如果您想使用 CSS 执行此操作,请使用以下 CSS 规则:
table td,
table th{
padding: 0;
}
关于表格单元格中的 CSS 无边框背景图像,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/27268095/