如何删除表中的行和列之间不需要的空间?

How do I remove the extra space between the rows and columns in the table.

如何删除表中的行和列之间的额外空间。

I've tried changing the margin, padding, and various border properties on the table and tr and td.

我试过更改表、tr和td的边界、填充和各种边框属性。

I want the pictures to all be right next to each other to look like one big image.

我希望所有的图片都在一起看起来像一个大图片。

How should I fix this?

我该怎么解决这个问题呢?

CSS

CSS

table {
  border-collapse: collapse;
}

HTML

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>

11 个解决方案

#1

Add this CSS reset to your CSS code: (From here)

将此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;
}

It'll reset the CSS effectively, getting rid of the padding and margins.

它将有效地重置CSS，消除填充和空白。

#2

167

Adding to vectran's answer: You also have to set cellspacing attribute on the table element for cross-browser compatibility.

添加到vectran的答案:为了跨浏览器兼容性，还必须在表元素上设置cellspace属性。

<table cellspacing="0">

EDIT (for the sake of completeness I'm expanding this 5 years later:):

编辑(为了完整起见，我将在5年后扩展:):

Internet Explorer 6 and Internet Explorer 7 required you to set cellspacing directly as a table attribute, otherwise the spacing wouldn't vanish.

Internet Explorer 6和Internet Explorer 7要求您将cellspace直接设置为一个表属性，否则空间不会消失。

Internet Explorer 8 and later versions and all other versions of popular browsers - Chrome, Firefox, Opera 4+ - support the CSS property border-spacing.

Internet Explorer 8和其他版本的流行浏览器——Chrome、Firefox、Opera 4+——支持CSS属性边界。

So in order to make a cross-browser table cell spacing reset (supporting IE6 as a dinosaur browser), you can follow the below code sample:

因此，为了使跨浏览器的表格单元间距重置(支持IE6作为一个恐龙浏览器)，您可以遵循以下代码示例:

table{
  border: 1px solid black;
}
table td {
  border: 1px solid black; /* Style just to show the table cell boundaries */
}


table.no-spacing {
  border-spacing:0; /* Removes the cell spacing via CSS */
  border-collapse: collapse;  /* Optional - if you don't want to have double border where cells touch */
}

<p>Default table:</p>

<table>
  <tr>
    <td>First cell</td>
    <td>Second cell</td>
  </tr>
</table>

<p>Removed spacing:</p>

<table class="no-spacing" cellspacing="0"> <!-- cellspacing 0 to support IE6 and IE7 -->
  <tr>
    <td>First cell</td>
    <td>Second cell</td>
  </tr>
</table>

#3

This worked for me:

这工作对我来说:

#table {
  border-collapse: collapse;
  border-spacing: 0;
}

#4

For images in td, use this for images:

对于td中的图像，请将此用于图像:

display: block;

That removes unwanted space for me

这样我就不需要什么空间了

#5

table 
{
    border-collapse: collapse;
}

will collapse all borders separating the table columns...

将会崩溃所有的边界分隔的表列…

or try

或者尝试

<table cellspacing="0" style="border-spacing: 0;">

do all cell-spacing to 0 and border spacing 0 to achieve same.

将所有单元格间距设为0，边框间距为0。

have a fun!

有一个有趣的!

#6

For standards compliant HTML5 add all this css to remove all space between images in tables:

对于标准兼容的HTML5，添加所有这些css来删除表中图像之间的所有空间:

table { 
    border-spacing: 0;
    border-collapse: collapse;
}
td {
    padding:0px;
}
td img {
    display:block;
}

#7

Just adding on top of Jacob's answer, for img in td,

除了Jacob的答案外，对于td中的img，

body {line-height: 0;}
img {display: block; vertical-align: bottom;}

This works for most email clients, including Gmail. But not Outlook. For outlook, you need to do two steps more:

这适用于大多数电子邮件客户端，包括Gmail。但是没有前景。对于outlook，你需要多做两个步骤:

table {border-collapse: collapse;}

and set every td elements to have the same height and width as its contained images. For example,

并将每个td元素的高度和宽度设置为与其包含的图像相同。例如,

<td width="600" height="80" style="line-height: 80px;">
    <img height="80" src="http://www.website.com/images/Nature_01.jpg" width="600" />
</td>

#8

setting Cellpadding and cellspacing to 0 will remove the unnecessary space between rows and columns...

将Cellpadding和cellspaces设置为0将会消除行与列之间不必要的空格……

#9

Try this,

试试这个,

table{
border-collapse: collapse; /* 'cellspacing' equivalent */
}

table td, 
table th{
padding: 0; /* 'cellpadding' equivalent */
}

#10

adding this line to the beginning of the file s worked for me:

将这一行添加到文件开头对我来说很有用:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">

modifying the css to set the proper border properties did not work until i added the above line

修改css以设置适当的边框属性，直到我添加了上面这一行之后才生效

#11

Have you tried removing the TRs that have a colspan and see if it changes anything?

你有没有试过移除带有colspan的TRs，看看它是否会改变什么?

I have experienced colspans and rowspans to be pretty nasty when it comes down to accurate table-designs. If your images look alright without the colspan-TRs, I'd start from there and build a nested tableset.

当谈到精确的桌面设计时，我经历过colspan和rowspan。如果您的图像没有colston - trs看起来还可以，我将从这里开始，并构建一个嵌套的汤匙。

Also your style.css doesn't seem to be complete, maybe there's something wrong there? I'd at least add padding: 0; margin: 0; to the table (or to the class "mytable"). Make sure, your images don't have spaces and/or borders, too (e.g. by adding img { border: 0; } to your stylesheet).

你的风格。css看起来不完整，可能有什么问题?我至少要加上填充:0;保证金:0;到表(或到类“mytable”)。确保您的图像没有空格和/或边框(例如添加img {border: 0);}样式表)。

#1