HTML Table CSS - TD之间的差距

-1

我正在写一封新闻稿，并且我已被告知使用表格进行布局是最佳做法。我遇到的麻烦是我的td之间出现了差距。每个TD有一个背景图像，这是真的很明显：HTML Table CSS - TD之间的差距

Screenshot of gap between tds

这里是我的代码，我失去了一些东西明显？我在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>

任何想法？谢谢！

来源

2014-10-29 Lee

你能发布小提琴？ – Nick 2014-10-29 08:35:53

加'td {padding：0}' – Vucko 2014-10-29 08:36:12

只需将表格的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/

来源

2014-10-29 08:36:27 secelite

我怎么错过了？哦，我是个白痴。非常感谢，一旦计时器耗尽，我们会接受答案。 – Lee 2014-10-29 08:39:06

没问题，欢迎您;） – secelite 2014-10-29 08:40:56

可以减少td到13px宽度：

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

来源

2014-10-29 08:37:56

HTML Table CSS - TD之间的差距

回答

相关问题