Warning: file_get_contents(/data/phpspider/zhask/data//catemap/3/html/84.json): failed to open stream: No such file or directory in /data/phpspider/zhask/libs/function.php on line 167

Warning: Invalid argument supplied for foreach() in /data/phpspider/zhask/libs/tag.function.php on line 1116

Notice: Undefined index: in /data/phpspider/zhask/libs/function.php on line 180

Warning: array_chunk() expects parameter 1 to be array, null given in /data/phpspider/zhask/libs/function.php on line 181
HTML表格边框和间距即使在样式设置为折叠时也会显示_Html_Css - Fatal编程技术网

HTML表格边框和间距即使在样式设置为折叠时也会显示

HTML表格边框和间距即使在样式设置为折叠时也会显示,html,css,Html,Css,我使用HTML创建了一个表,如下所示: <table class="test"> <tr> <td colspan="2"> <div class="test2"> <img src="1.jpg" width="100%">

我使用HTML创建了一个表,如下所示:

<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;}
    
  • 对于非表格数据,不应使用
    元素。您将发现使用该标记很难处理响应性
  • flexbox是一种适合您布局的现代解决方案:

    正文{
    保证金: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;       
        }