如何删除默认表格边框/间距/填充？ [复制]

Question

我正在使用表格来显示图像、标题和日期。 一切都很好，我对它的外观很满意，但图像周围有一些空间，我认为它是表格边框/边距/填充。

我想让图片靠在桌子的左边，这样它之间就没有蓝色了。

HTML：

<table style="background-color: blue;">
  <tbody>
    <tr>
      <td><img src="http://revistasindromes.com/images/100x100.gif"></td>
      <td>Hello world!</td>
      <td>Hello world!</td>
    </tr>
  </tbody>
</table>

Here 是一个演示。

Answer 1

让你的代码如下：

<table style="background-color: blue;" border="0" cellspacing="0" cellpadding="0">
  <tr>
    <td>
    </td>
  </tr>
</table>

Answer 2

W3C Working Draft 08 October 2015 for HTML 5.1 将table 元素上的cellspacing 和cellpadding 列为已过时，因此应避免使用它。

在11.2 Non-conforming features 部分下，您会找到以下注释；

以下列表中的元素完全过时，不得 作者使用

将cellpadding 和cellspacing 添加到列表中

• table 元素上的单元格填充
• table 元素上的单元格间距

所以这是你的选择；

选项 1

您可以在当前样式表中添加以下样式；

table { 
  background-color: blue; 
  border-collapse: collapse; border-spacing: 0; /* cellspacing */
}

th, td { 
  padding: 0px;  /* cellpadding */
}

这个解决方案看起来像这个小提琴； https://jsfiddle.net/z9tz4Lcb/

选项 2

按照 cmets 中 Vucko 的说明规范化您的 CSS。

您可以直接从 GitHub 下载并捆绑 normalize.css 文件，或者使用如下所示的某种 CDN

<link rel="stylesheet" type="text/css" href="https://cdnjs.cloudflare.com/ajax/libs/normalize/3.0.3/normalize.min.css">

这个解决方案看起来像这个小提琴； https://jsfiddle.net/x7a6kjvo/

.. 当你在它的时候

您还应该在页面样式表中为您的<img> 标签设置display: block;，以删除图像下方的微小空间。

你也可以在你的图片容器上使用line-height: 0;，或者在你的img标签上设置vertical-align: bottom;。我还看到有人建议您使用vertical-align: sub;，但这在 IE6 或 IE7 中不起作用。

td > img { 
  display: block; 
}

Answer 3

你可以试试这个：

<table cellspacing="0" cellpadding="0">

在 CSS 中，添加

table {border: none;}