我在使用 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 元素之间的额外空格。
最佳答案
你有 margin 是什么意思?你能告诉我们你需要删除什么吗?您需要删除的是水平空间还是垂直空间?
我认为您将宽度设置为 100%,这样列就会在整个屏幕宽度上划分,尝试将 100% 减少到 80%,然后再减少 60%,看看这对结果有何影响
关于html - 表 : removing unwanted spaces between dt (with different sizes) 有问题,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/20026018/