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

【问题标题】：Remove white spaces in table without affecting the other rows placement删除表格中的空格而不影响其他行的位置
【发布时间】：2018-03-29 17:28:09
【问题描述】：

我对 HTML 和 CSS 还很陌生，我一直致力于通过使用表格来创建可点击的横幅，但我无法摆脱行和拼接图像之间的空白。
这就是表格在浏览器中的样子

下面是我的表格代码：

<!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>

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

【问题讨论】：

请edit您的问题并提供minimal reproducible example。 请勿发布代码图片。

标签： html css html-table

【解决方案1】：

尝试添加这个 CSS：

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

边框折叠将做到这一点：删除每个表数据 (<td>) 元素之间的空格。
填充也会删除这些元素之间的任何剩余空间。

【讨论】：