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>

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