表格问题：删除dt之间不需要的空格（不同大小）

Question

我在html中遇到问题。

我在id #middlebody中包含一个跟随表单大小的iframe和一个包含单行的表，其中包含文本和带有图像的输入。

    <div id='middlebody'>
<iframe src="" frameborder = 1 name="MrIframe"><p>Your browser does not support iframes.</p></iframe>
<table border = '3' cellspacing = "0">

<tr>
<td><b> INTERACTIVE DATABASE </b><br><a href='' target='MrIframe'><input type="image" src='Resources/Picture1.png' width=100 height =100 id ='interactive'></a></td>
<td><b> ADMINISTRATIVE PERFORMANCE </b><br><a href='' target='MrIframe'><input type="image" src='Resources/Picture6.png' width=100 height =100 id ='administrative'></a></td>
<td><b> ECONOMIC PERFORMANCE </b><br><a href='' target='MrIframe'><input type="image" src='Resources/Picture5.png' width=100 height =100 id ='economic'></a></td>
<td><b> SECTORAL PERFORMANCE </b><br><a href='' target='MrIframe'><input type="image" src='Resources/Picture2.png' width=100 height =100 id ='sectoral'></a></td>
<td><b> SOCIAL PERFORMANCE </b><br><a href='' target='MrIframe'><input type="image" src='Resources/Picture3.png' width=100 height =100 id ='social'></a></td>
<td><b> ENVIRONMENTAL PERFORMANCE </b><br><a href='' target='MrIframe'><input type="image" src='Resources/Picture4.png' width=100 height =100 id ='environmental'></a></td>
</tr>
</table>
</div> 

这是我的元素的CSS设置：

#middlebody
{
position: fixed;
left : 160px;
top: 80px;

display: block;
border: None;
width : 100%;
Height : 100%;

}

Iframe
{
display: block;
border: None;
width : 70%;
Height : 54%;
}


table 
{
border-collapse: collapse;
border-spacing: 0px;
}
td
{

    padding: 0;

    font-size: 100%;

text-align: center;
    }

如果您要测试我的代码，您会注意到我的表项目中的项目之间仍有差距。

为什么？我已经尝试了padding = 0，边框折叠，边框间距，但它似乎无法正常工作

我怎样才能使单元格之间的额外边距不再出现，即使其中的文本长度不同？

非常感谢任何帮助。

编辑这是截图。我想要的是删除表中的dt元素之间的额外空格。

Answer 1

你的意思是什么？你能告诉我们你需要删除的内容吗？你需要删除它是水平空间还是垂直空间？

我认为您将宽度设置为100％，因此列在屏幕的整个宽度上划分，尝试将100％降低到80％然后降低60％，看看这会如何影响结果

Answer 2

我真的不知道你是否接受这个 但我得到了codepen的例子 - ＆gt; CODEPEN EXAMPLE