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之間的差距

回答

相關問題