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

制作如下代码：

$(".linkdiv").each(function(index){
    $(this).attr("id", "linkdiv"+index);
    var text = index === $(".linkdiv").length -1 ? "first" : "next";
  var next = index === $(".linkdiv").length -1 ? 0 : index+1;
  $("<a href='#linkdiv"+next+"'>Go to "+text+"</a>").insertBefore(this);
});

Answer 2

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

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

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

将cellpadding和cellspacing添加到列表中

table元素上的cellpadding

cells {table元素

所以这是你的选择;

选项1

您可以将以下样式添加到当前样式表中;

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

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

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

选项2

在评论中按照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/

..当你在它的时候

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

您还可以在图片容器上使用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;}

如何删除默认的表格边框/间距/填充？

3 个答案: