如何在表中删除行和列之间不必要的空格？ [英] How to remove unwanted space between rows and columns in table?
本文介绍了如何在表中删除行和列之间不必要的空格？的处理方法，对大家解决问题具有一定的参考价值，需要的朋友们下面随着小编来一起学习吧！
问题描述
如何删除表中行和列之间的额外空间。
how do I remove the extra space between the rows and columns in the table.
我已尝试更改边距，填充和各种边框属性表格和tr和td。
I've tried changing the margin, padding, and various border properties on the table and tr and td.
我想让图片彼此相邻，看起来像一个大图片。
I want the pictures to all be right next to each other to look like one big image.
我应该如何解决这个问题？
how should I fix this?
style.css
style.css
table {
border-collapse:collapse;
}
index.html
index.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代码： a href =http://meyerweb.com/eric/tools/css/reset/reset.css =nofollow noreferrer>从这里）
Add this CSS reset to your CSS code: (From here)
/* 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，摆脱填充和边距。
It'll reset the CSS effectively, getting rid of the padding and margins.
这篇关于如何在表中删除行和列之间不必要的空格？的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！
查看全文
