尽管 td{padding:0} 在表格单元格内填充答案

【问题标题】：Padding inside table cell despite td{padding:0}尽管 td{padding:0} 在表格单元格内填充
【发布时间】：2016-03-03 21:22:27
【问题描述】：

我现在遇到这个非常烦人的错误有一段时间了。问题很简单，当我放置一个对象时，表格单元格的顶部和底部会出现这个巨大的填充（在这种情况下，图像）在里面。

我想要做的是将不同的对象放在一个设置为 HTML 表格的网格中，这就是为什么你会看到所有这些额外的单元格的原因。表格和单元格的初始宽度和高度是已知的，我只是根据对象的宽度/高度指定将放置对象的单元格的列/行跨度。

我已经搜索并应用了许多解决方案，例如 cellspacing、cellpadding = 0、padding: 0、img 的显示块，但这里似乎没有任何效果。

td{border:1px solid black; padding:0}

<table style="width:600pt; height:800pt; table-layout: fixed;" cellspacing="0" cellpadding="0">
<tr>
<td colspan="30" ></td></tr>
<tr>
<td colspan="30" ></td></tr>
<tr>
<td colspan="30" ></td></tr>
<tr>
<td colspan="30" ></td></tr>
<tr>
<td colspan="30" ></td></tr>
<tr>
<td colspan="30" ></td></tr>
<tr>
<td colspan="30" ></td></tr>
<tr>
    <td ></td><td ></td><td ></td><td ></td><td ></td><td ></td><td ></td><td rowspan="15" colspan="15" ><img style="width:298pt; height:292pt;" src="http://i.imgur.com/mrxsiZ3.jpg"/>
</td><td ></td><td ></td><td ></td><td ></td><td ></td><td ></td><td ></td><td ></td></tr>
<tr>
<td ></td><td ></td><td ></td><td ></td><td ></td><td ></td><td ></td><td ></td><td ></td><td ></td><td ></td><td ></td><td ></td><td ></td><td ></td></tr>
<tr>
<td ></td><td ></td><td ></td><td ></td><td ></td><td ></td><td ></td><td ></td><td ></td><td ></td><td ></td><td ></td><td ></td><td ></td><td ></td></tr>
<tr>
<td ></td><td ></td><td ></td><td ></td><td ></td><td ></td><td ></td><td ></td><td ></td><td ></td><td ></td><td ></td><td ></td><td ></td><td ></td></tr>
<tr>
<td ></td><td ></td><td ></td><td ></td><td ></td><td ></td><td ></td><td ></td><td ></td><td ></td><td ></td><td ></td><td ></td><td ></td><td ></td></tr>
<tr>
<td ></td><td ></td><td ></td><td ></td><td ></td><td ></td><td ></td><td ></td><td ></td><td ></td><td ></td><td ></td><td ></td><td ></td><td ></td></tr>
<tr>
<td ></td><td ></td><td ></td><td ></td><td ></td><td ></td><td ></td><td ></td><td ></td><td ></td><td ></td><td ></td><td ></td><td ></td><td ></td></tr>
<tr>
<td ></td><td ></td><td ></td><td ></td><td ></td><td ></td><td ></td><td ></td><td ></td><td ></td><td ></td><td ></td><td ></td><td ></td><td ></td></tr>
<tr>
<td ></td><td ></td><td ></td><td ></td><td ></td><td ></td><td ></td><td ></td><td ></td><td ></td><td ></td><td ></td><td ></td><td ></td><td ></td></tr>
<tr>
<td ></td><td ></td><td ></td><td ></td><td ></td><td ></td><td ></td><td ></td><td ></td><td ></td><td ></td><td ></td><td ></td><td ></td><td ></td></tr>
<tr>
<td ></td><td ></td><td ></td><td ></td><td ></td><td ></td><td ></td><td ></td><td ></td><td ></td><td ></td><td ></td><td ></td><td ></td><td ></td></tr>
<tr>
<td ></td><td ></td><td ></td><td ></td><td ></td><td ></td><td ></td><td ></td><td ></td><td ></td><td ></td><td ></td><td ></td><td ></td><td ></td></tr>
<tr>
<td ></td><td ></td><td ></td><td ></td><td ></td><td ></td><td ></td><td ></td><td ></td><td ></td><td ></td><td ></td><td ></td><td ></td><td ></td></tr>
<tr>
<td ></td><td ></td><td ></td><td ></td><td ></td><td ></td><td ></td><td ></td><td ></td><td ></td><td ></td><td ></td><td ></td><td ></td><td ></td></tr>
<tr>
<td ></td><td ></td><td ></td><td ></td><td ></td><td ></td><td ></td><td ></td><td ></td><td ></td><td ></td><td ></td><td ></td><td ></td><td ></td></tr>
<tr>
<td rowspan="18" colspan="30" ></td></tr>
</table >

Img 位于网格的第 8 行和第 8 列，但由于填充，它在单元格中向下滑动了很多。在浏览器中检查单元格将清除问题。

为了您的方便，可以在here找到小提琴

【问题讨论】：

标签： html css

【解决方案1】：

填充只是因为您强制表格的高度为 800 像素。如果您删除 height 属性，则填充消失。

td{border:1px solid black; padding:0;}

<table style="width:600pt; table-layout: fixed;" cellspacing="0" cellpadding="0">
<tr>
<td colspan="30" ></td></tr>
<tr>
<td colspan="30" ></td></tr>
<tr>
<td colspan="30" ></td></tr>
<tr>
<td colspan="30" ></td></tr>
<tr>
<td colspan="30" ></td></tr>
<tr>
<td colspan="30" ></td></tr>
<tr>
<td colspan="30" ></td></tr>
<tr>
    <td ></td><td ></td><td ></td><td ></td><td ></td><td ></td><td ></td><td rowspan="15" colspan="15" ><img style="width:298pt; height:292pt;" src="http://i.imgur.com/mrxsiZ3.jpg"/>
</td><td ></td><td ></td><td ></td><td ></td><td ></td><td ></td><td ></td><td ></td></tr>
<tr>
<td ></td><td ></td><td ></td><td ></td><td ></td><td ></td><td ></td><td ></td><td ></td><td ></td><td ></td><td ></td><td ></td><td ></td><td ></td></tr>
<tr>
<td ></td><td ></td><td ></td><td ></td><td ></td><td ></td><td ></td><td ></td><td ></td><td ></td><td ></td><td ></td><td ></td><td ></td><td ></td></tr>
<tr>
<td ></td><td ></td><td ></td><td ></td><td ></td><td ></td><td ></td><td ></td><td ></td><td ></td><td ></td><td ></td><td ></td><td ></td><td ></td></tr>
<tr>
<td ></td><td ></td><td ></td><td ></td><td ></td><td ></td><td ></td><td ></td><td ></td><td ></td><td ></td><td ></td><td ></td><td ></td><td ></td></tr>
<tr>
<td ></td><td ></td><td ></td><td ></td><td ></td><td ></td><td ></td><td ></td><td ></td><td ></td><td ></td><td ></td><td ></td><td ></td><td ></td></tr>
<tr>
<td ></td><td ></td><td ></td><td ></td><td ></td><td ></td><td ></td><td ></td><td ></td><td ></td><td ></td><td ></td><td ></td><td ></td><td ></td></tr>
<tr>
<td ></td><td ></td><td ></td><td ></td><td ></td><td ></td><td ></td><td ></td><td ></td><td ></td><td ></td><td ></td><td ></td><td ></td><td ></td></tr>
<tr>
<td ></td><td ></td><td ></td><td ></td><td ></td><td ></td><td ></td><td ></td><td ></td><td ></td><td ></td><td ></td><td ></td><td ></td><td ></td></tr>
<tr>
<td ></td><td ></td><td ></td><td ></td><td ></td><td ></td><td ></td><td ></td><td ></td><td ></td><td ></td><td ></td><td ></td><td ></td><td ></td></tr>
<tr>
<td ></td><td ></td><td ></td><td ></td><td ></td><td ></td><td ></td><td ></td><td ></td><td ></td><td ></td><td ></td><td ></td><td ></td><td ></td></tr>
<tr>
<td ></td><td ></td><td ></td><td ></td><td ></td><td ></td><td ></td><td ></td><td ></td><td ></td><td ></td><td ></td><td ></td><td ></td><td ></td></tr>
<tr>
<td ></td><td ></td><td ></td><td ></td><td ></td><td ></td><td ></td><td ></td><td ></td><td ></td><td ></td><td ></td><td ></td><td ></td><td ></td></tr>
<tr>
<td ></td><td ></td><td ></td><td ></td><td ></td><td ></td><td ></td><td ></td><td ></td><td ></td><td ></td><td ></td><td ></td><td ></td><td ></td></tr>
<tr>
<td ></td><td ></td><td ></td><td ></td><td ></td><td ></td><td ></td><td ></td><td ></td><td ></td><td ></td><td ></td><td ></td><td ></td><td ></td></tr>
<tr>
<td rowspan="18" colspan="30" ></td></tr>
</table >

【讨论】：

【解决方案2】：

如果您希望表格为该高度，您的另一种选择是直接在 td 上设置 height 属性。这将相应地调整所有其他 tds 以添加到您设置的表格高度。但问题是 tr 的 tds 总是相同的高度。因此，如果您在同一个 tr 内设置多个 td 的高度，则所有 td 的高度都将设置为最大的 td 高度。

这可能听起来令人困惑，但基本上，如果您的图片大小不同，您就无法将每个表格数据唯一地定制为一张图片。您可能会获得“那个”表格数据以删除“填充”，但一旦添加更多图片，如果它们的大小不同，您将至少在其中一张照片上使用填充。

此解决方案可能适合您，但我会考虑使用设计框架。对于这类事情，网格系统可能更容易。

【讨论】：

【解决方案3】：

如果我对您的理解正确，您希望图片位于顶部吗？如果是这种情况，请使用垂直对齐。

<td rowspan="15" colspan="15" style="vertical-align:top">
    <img style="width:298pt; height:292pt;" src="http://i.imgur.com/mrxsiZ3.jpg"/>
</td>

Demo Fiddle

【讨论】：