Question

我对HTML和CSS相当陌生，我一直致力于使用表创建可点击的横幅，但是我在排除行和拼接图像之间的空白时遇到了麻烦。登记/> 这是表格在浏览器中的样子

Browser view of table

以下是我的表格代码：

<!DOCTYPE html>
<html>
<head>
    <meta charset="UTF-8" />
    <title>A Spot Banner</title>
</head>
<body>
    <table style="width: 100%;">
        <tbody>
            <tr>
                <td colspan="3"><img src="images/top%20header%201.jpg" alt="TOP BANNER" /></td>
            </tr>
            <tr>
                <td><img src="images/top%20row%20left%20side%201.jpg" alt="SECOND BANNER" /></td>
                <td><a href="https://www.link.com/login"><img src="images/last%20image%20to%20line%20with%20top%20header%201.jpg" alt="THIRD BANNER" /></a></td>
            </tr>
            <tr>
                <td><a href="https://www.link.com/application"><img src="images/bottom%20row%20left%20side%202.jpg" alt="FOURTH BANNER" /></a></td>
            </tr>
        </tbody>
    </table>
</body>
</html>

我尝试过使用填充和边距的内联样式，但两者似乎都会影响其他横幅的位置，特别是第三个横幅。
我很新，不太确定还有什么可以尝试，有没有人有任何建议或资源可以用来解决这个问题？

Answer 1

尝试添加此CSS：

table {
    border-collapse: collapse;
}
td {
    padding: 0;
}

Border-collapse就是这样做的：删除每个表数据（<td>）元素之间的空间。
填充还将删除这些元素之间的任何剩余空间。

删除表格中的空格而不影响其他行的展示位置

1 个答案: