HTML 表格在单元格周围添加 4px [重复]

Question

我可能错过了一些愚蠢的事情，但我需要有人帮助。 我拍摄了一张图像并使用 Photoshop 将其切成块。我正在尝试使用 HTML 表重建它。 我成功地在 HTML 表格中重新创建了图像。我还设法删除了列之间的空格。但由于某种原因，行之间有 4px 的空间，我不知道它来自哪里。

这是我的 HTML 代码：

<table cellpadding="0" cellspacing="0" style="border-spacing:0px;border-collapse:collapse;">
            <tr>
                <td  style="height:100px"><img src="layer1.png" /></td>
                <td><img src="layer2.png" /></td>
                <td colspan="2"><img src="layer3.png" /></td>
                <td><img src="layer4.png" /></td>
                <td><img src="layer5.png" /></td>
            </tr>

            <tr>
                <td style="height:100px"><img src="layer6.png" /></td>
                <td rowspan="2"><img src="layer7.png" /></td>
                <td><img src="layer8.png" /></td>
                <td><img src="layer9.png" /></td>
                <td colspan="2"><img src="layer10.png"/></td>
            </tr>

            <tr>
                <td><img src="layer11.png" /></td>
                <td colspan="2" rowspan="2"><img src="layer12.png" /></td>
                <td><img src="layer13.png" /></td>
                <td><img src="layer14.png" /></td>
            </tr>

            <tr>
                <td colspan="2"><img src="layer15.png" /></td>
                <td><img src="layer16.png" /></td>
                <td><img src="layer17.png" /></td>
            </tr>

            <tr><td colspan="3"><img src="layer18.png" /></td>
                <td><img src="layer19.png" /></td>
                <td><img src="layer20.png" /></td>
                <td><img src="layer21.png" /></td>
            </tr>

            <tr>
                <td rowspan="3"><img src="layer22.png" /></td>
                <td><img src="layer23.png" /></td>
                <td><img src="layer24.png" /></td>
                <td><img src="layer25.png" /></td>
                <td><img src="layer26.png" /></td>
                <td><img src="layer27.png" /></td>
            </tr>

            <tr>
                <td><img src="layer28.png" /></td>
                <td><img src="layer29.png" /></td>
                <td><img src="layer30.png" /></td>
                <td><img src="layer31.png" /></td>
                <td colspan="2" rowspan="2"><img src="layer32.png" /></td>
            </tr>
        </table>

这就是它目前的样子，我不知道如何消除之间的空间。

Answer 1

使用 border-spacing 来消除单元格之间的间距。

您可以通过设置删除默认的 CSS 设置

• 将

  line-height

  更改为 0 表示

  tr

• 将

  padding

  更改为 0，表示

  td

  。

table {
  border-collapse: collapse;
  border-spacing: 0; /* removing spacing between cells */
}

tr {
  line-height: 0; /* removing spacing between rows */
}

td {
  padding: 0; /* removing spacing between columns */
}

<table>
  <tr>
    <td><img src="https://picsum.photos/100/100?a" /></td>
    <td><img src="https://picsum.photos/100/100?b" /></td>
  </tr>
  <tr>
    <td><img src="https://picsum.photos/100/100?c" /></td>
    <td><img src="https://picsum.photos/100/100?d" /></td>
  </tr>
</table>