html - 表 : removing unwanted spaces between dt (with different sizes) 有问题

Question

我在使用 html 表格时遇到问题。

我在 ID 为 #middlebody 的一个 Iframe 中包含了一个遵循表单大小的 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, border collapse, border spacing 都试过了，好像都不行

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

非常感谢任何帮助。

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

Answer 1

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

我认为您将宽度设置为 100%，这样列就会在整个屏幕宽度上划分，尝试将 100% 减少到 80%，然后再减少 60%，看看这对结果有何影响