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

Question

我使用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>

然后我使用以下样式尝试删除间距和边框：

.test
    {
        margin: auto;
        width:1000px;
        height:583px;
        border-collapse: collapse;
        padding: 0; 
        position: relative;
    }

    .test2
    {                   
        width:100%;
        height:100%;
        position: relative;
        overflow: hidden;       
    }

问题是它似乎不起作用，因为我仍然可以在单元格之间找到间距，如下图所示：

Answer 1

1. 默认情况下，浏览器会向表格添加边框。要删除它，您需要覆盖它：

table, table * {border: none;}

1. 您不应该将<table>元素用于任何非表格数据。您会发现使用该标记很难处理响应性。

布局的现代解决方案是flexbox：

body {
  margin: 0;
  background-color: #212121;
  padding: 30px;
}
.flex-images {
  display: flex;
}
.flex-images div {
  flex-grow: 1;
}
.flex-images img {
  width: 100%;
  min-height: 100%;
  object-fit: cover;
  display: block;
}
@media (max-width: 539px) {
  .flex-images {
    flex-wrap: wrap;
  }
}

<div class="flex-images">
  <div>
    <img src="https://unsplash.it/200/300" />
  </div>
  <div>
    <img src="https://unsplash.it/600/400" />
  </div>
</div>
<div class="flex-images">
  <div>
    <img src="https://unsplash.it/500/250" />
  </div>
  <div>
    <img src="https://unsplash.it/400/300" />
  </div>
</div>
<div class="flex-images">
  <div>
    <img src="https://unsplash.it/150/350" />
  </div>
  <div>
    <img src="https://unsplash.it/750/300" />
  </div>
</div>

如果您不想裁剪图像，请将同一行中的所有图像设置为相同的高度。

Answer 2

尝试为此更改CSS ...

＆＃13;

＆＃13;

.test {
  /* margin: auto; remove */
  width: 1000px;
  height: 583px;
  border-collapse: collapse;
  padding: 0;
  position: relative;
  /*Add to remove border and place them on eachother*/
  border: none;
  margin: -1px;
}

.test2 {
  width: 100%;
  height: 100%;
  position: relative;
  overflow: hidden;
  /*Same thing down here*/
  border: none;
  margin: -1px;
}

＆＃13;

＆＃13;

＆＃13;

请详细说明问题。