如何删除表格中行和列之间的多余空间。
我尝试过更改表格以及tr和td的边距,填充和各种边框属性。
我希望所有图片都紧挨着看起来像一张大图片。
我该如何解决?
CSS
table { border-collapse: collapse; }
HTML
<?xml version="1.0" encoding="utf-8"?> <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd"> <html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en"> <head> <title>Tera Byte Video Game Creation Camp</title> <link rel="stylesheet" type="text/css" href="style.css"></link> </head> <body> <table class="mytable" align="center"> <tr class="header"> <td colspan="3"><img src="images/home_01.png" /></td> </tr> <tr class="top"> <td colspan="3"><img src="images/home_02.png" /></td> </tr> <tr class="link-row"> <td><img src="images/home_03.png" /></td> <td><img src="images/home_04.png" /></td> <td><img src="images/home_05.png" /></td> </tr> <tr class="link-row"> <td><img src="images/home_07.png" /></td> <td><img src="images/home_06.png" /></td> <td><img src="images/home_08.png" /></td> </tr> <tr class="link-row"> <td><img src="images/home_09.png" /></td> <td><img src="images/home_10.png" /></td> <td><img src="images/home_11.png" /></td> </tr> <tr class="link-row"> <td><img src="images/home_12.png" /></td> <td><img src="images/home_13.png" /></td> <td><img src="images/home_14.png" /></td> </tr> <tr class="bottom"> <td colspan="3"><img src="images/home_15.png" /></td> </tr> </table> </body> </html>
将此CSS重置添加到您的CSS代码中:
/* http://meyerweb.com/eric/tools/css/reset/ v2.0 | 20110126 License: none (public domain) */ html, body, div, span, applet, object, iframe, h1, h2, h3, h4, h5, h6, p, blockquote, pre, a, abbr, acronym, address, big, cite, code, del, dfn, em, img, ins, kbd, q, s, samp, small, strike, strong, sub, sup, tt, var, b, u, i, center, dl, dt, dd, ol, ul, li, fieldset, form, label, legend, table, caption, tbody, tfoot, thead, tr, th, td, article, aside, canvas, details, embed, figure, figcaption, footer, header, hgroup, menu, nav, output, ruby, section, summary, time, mark, audio, video { margin: 0; padding: 0; border: 0; font-size: 100%; font: inherit; vertical-align: baseline; } /* HTML5 display-role reset for older browsers */ article, aside, details, figcaption, figure, footer, header, hgroup, menu, nav, section { display: block; } body { line-height: 1; } ol, ul { list-style: none; } blockquote, q { quotes: none; } blockquote:before, blockquote:after, q:before, q:after { content: ''; content: none; } table { border-collapse: collapse; border-spacing: 0; }
它将有效地重置CSS,摆脱填充和边距。