HTML表格CSS - TD之间的差距

Question

我正在撰写时事通讯，并且我被告知使用表格进行布局是最佳做法。我遇到的麻烦是我的td之间出现了差距。每个td都有一个背景图像，所以它非常明显：

这是我的代码，我错过了一些明显的东西吗？我在Firefox中测试这个：

  <table style = "margin: auto; width: 90%; max-width: 900px; border-collapse: collapse; border-spacing: 0;">
    <tr style = "height: 16px;">
      <td style = "width: 15px; background: url('http://yourhealthfoodstore.co.uk/media/wysiwyg/top_left.png') no-repeat center;"></td>
      <td style = "background: url('http://yourhealthfoodstore.co.uk/media/wysiwyg/top.png') repeat-x;"></td>
      <td style = "width: 15px; background: url('http://yourhealthfoodstore.co.uk/media/wysiwyg/top_right.png') no-repeat center;"></td>
    </tr>
  </table>

有什么想法吗？谢谢！

Answer 1

只需将表格的cellpadding设置为零。

<table cellpadding="0" style = "margin: auto; width: 90%; max-width: 900px; border-collapse: collapse; border-spacing: 0;">
    <tr style = "height: 16px;">
      <td style = "width: 15px; background: url('http://yourhealthfoodstore.co.uk/media/wysiwyg/top_left.png') no-repeat center;"></td>
      <td style = "background: url('http://yourhealthfoodstore.co.uk/media/wysiwyg/top.png') repeat-x;"></td>
      <td style = "width: 15px; background: url('http://yourhealthfoodstore.co.uk/media/wysiwyg/top_right.png') no-repeat center;"></td>
    </tr>
  </table>

http://jsfiddle.net/6oteoe96/

Answer 2

您可以将td的宽度缩小为13px：

＆＃13;

＆＃13;

<table style="margin: auto; width: 90%; max-width: 900px; border-collapse: collapse; border-spacing: 0;">
  <tr style="height: 16px;">
    <td style="width: 13px; background: url('http://yourhealthfoodstore.co.uk/media/wysiwyg/top_left.png') no-repeat center;"></td>
    <td style="background: url('http://yourhealthfoodstore.co.uk/media/wysiwyg/top.png') repeat-x;"></td>
    <td style="width: 13px; background: url('http://yourhealthfoodstore.co.uk/media/wysiwyg/top_right.png') no-repeat center;"></td>
  </tr>
</table>

＆＃13;

＆＃13;

＆＃13;