HTML表格边框和间距即使在样式设置为折叠时也会显示
我使用HTML创建了一个表,如下所示:HTML表格边框和间距即使在样式设置为折叠时也会显示,html,css,Html,Css,我使用HTML创建了一个表,如下所示: <table class="test"> <tr> <td colspan="2"> <div class="test2"> <img src="1.jpg" width="100%">
<table class="test">
<tr>
<td colspan="2">
<div class="test2">
<img src="1.jpg" width="100%">
</div>
</td>
<td width="33%">
<div class="test2">
<img src="1.jpg" width="204%">
</div>
</td>
</tr>
<tr>
<td width="50%">
<div class="test2">
<img src="1.jpg" width="100%">
</div>
</td>
<td colspan="2">
<div class="test2">
<img src="1.jpg" width="100%">
</div>
</td>
</tr>
</table>
问题是它似乎不起作用,因为我仍然可以从这里显示的图像中看到单元格之间的间距:尝试为此更改CSS
.test{
/*边距:自动;删除*/
宽度:1000px;
身高:583px;
边界塌陷:塌陷;
填充:0;
位置:相对位置;
/*添加以删除边框并将它们彼此放置*/
边界:无;
保证金:-1px;
}
.test2{
宽度:100%;
身高:100%;
位置:相对位置;
溢出:隐藏;
/*这里也一样*/
边界:无;
保证金:-1px;
}
table,table*{border:none;}
元素。您将发现使用该标记很难处理响应性正文{
保证金:0;
背景色:#212121;
填充:30px;
}
.flex图像{
显示器:flex;
}
.flex影像组{
柔性生长:1;
}
.flex图像img{
宽度:100%;
最小高度:100%;
对象匹配:覆盖;
显示:块;
}
@介质(最大宽度:539px){
.flex图像{
柔性包装:包装;
}
}
您能指出您认为可以消除边框塌陷的确切线条吗?边框塌陷:塌陷;-这难道不应该消除边界吗?填充:0;-这不应该删除单元格间距吗?。它所做的只是将相邻单元的边界折叠成一个边界。它统一了边界,确保它们不会加倍。它不会删除它们。在发布之前,我已经尝试将边框设置为“无”。它没有解决这个问题。我的理解是边界:没有;当边界崩溃或是我错了时,它就没有效果了?这些图像是要裁剪的,只是临时的占位符图像,以后要替换。当我有更多的时间时,我将尝试您的和flex解决方案。@Ismail,您的理解是正确的。好吧,我想我应该庆幸你会浪费一些宝贵的时间来实施我通过折断手指提供的简单解决方案。谢谢你,我不会再占用你的时间了。祝你好运!谢谢你的帮助。事实证明,这个问题根本与边境无关。出于某种原因,div没有填充表中的整个单元格,留下了一些空白,并呈现出有边框的外观。根据建议,我现在已经将布局从表格切换到了div。再一次,谢谢。我从未想过尝试负边距-我会在有空闲时间时尝试。将边框设置为“无”不起作用,因为我在发布之前已经尝试过。谢谢Philip,但不幸的是,将边框设置为“无”并使用负边距对我不起作用。“边界仍然存在还有其他原因吗?”伊斯梅尔,我相信安德烈的回答是正确的。使用表格是一种不好的格式化方式,请改用div。谢谢您的帮助。事实证明,这个问题根本与边境无关。出于某种原因,div没有填充表中的整个单元格,留下了一些空白,并呈现出有边框的外观。如前所述,我现在已将布局从表格切换到分区。再次感谢。
.test
{
margin: auto;
width:1000px;
height:583px;
border-collapse: collapse;
padding: 0;
position: relative;
}
.test2
{
width:100%;
height:100%;
position: relative;
overflow: hidden;
}