尽管td {padding：0}，但在表格单元格内部填充

时间：2015-07-28 04:27:18

标签： html css

我现在有这个非常讨厌的bug了。问题很简单，当我放置一个物体时，在表格单元的顶部和底部出现这个巨大的填充物（在这种情况下，在它里面。

我要做的是将不同的对象放在网格设置为HTML格式的表格中，以便您可以看到所有这些额外的单元格。表格和单元格的初始宽度和高度是已知的，我只是根据对象的宽度/高度指定要放置对象的单元格的列/行范围。

我搜索并应用了很多解决方案，例如cellspacing，cellpadding = 0，padding：0，img的显示块，但似乎没有任何工作。

＆＃13;
＆＃13; 
td{border:1px solid black; padding:0}
＆＃13; 
<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 >
＆＃13;
＆＃13;
＆＃13;

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

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

3 个答案:

答案 0 :(得分：2)

填充仅在那里因为你强制桌子的高度为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 >

答案 1 :(得分：1)

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

这可能听起来令人困惑，但基本上，如果您的图片尺寸不同，则无法将每张桌子数据唯一地定制到图片上。你可能会得到＆＃34;那个＆＃34;表数据有＆＃34;填充＆＃34;删除但是一旦你添加了更多的图片，如果你的照片尺寸不同，你至少会在其中一张照片上填充。

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

答案 2 :(得分：0)

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

<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

相关问题
最新问题