如何移除表格中图片旁第二个单元格的异常空白？

我是Stack Overflow新手，若问题表述不清请见谅。我正尝试将一张表格图片还原为HTML&CSS表格：

• 预期效果：右侧单元格内的两张图片及文字无多余空白，与左侧单元格高度匹配
• 实际效果：右侧单元格下方出现空白（图中圈出部分），与左侧单元格高度不一致

图片原始尺寸：

• pic1: 600x600 px
• pic2: 418x347 px
• pic3: 2863x2404 px

以下是我使用的HTML和CSS代码：

CSS代码 #

.central {
    text-align: center;
}

#pss {
  font-family: Arial, Helvetica, sans-serif;
  border-collapse: collapse;
  width: 100%;
}

#pss td {
  border: 1px solid #ddd;
  height: 180px;
}

#pss tr:nth-child(even){
    background-color: #f2f2f2;
    height: 350px;
    
}

#pss td:hover {background-color: #ddd;}

#pss th {
  padding-top: 10px;
  padding-bottom: 12px;
  text-align: left;
  background-color: #1f3855;
  color: white;
}


#picleft {
  text-align: right;
}

HTML代码 #

<table id="pss">
<thead>
<tr>
<th colspan="2">This is the th part of the table I think</th>
</tr>
</thead>
<tbody>
    <tr>
    <td>Here is: <br>
        &#10003; text <br>
        &#10003; more text<br>
        &#10003; listed<br>
        &#10003; like this<br>
        &#10003; no problem <br>
        
        </td>
    <td>These two: <br>
        &#10003; cells <br>
        &#10003; aka this row<br>
        &#10003; is not the problem </td>
    </tr>
    <tr>
    <td>
        <div id= "tripod">
        <img src="https://placehold.co/600x600" alt="tripod">
        </div>
            </td>
    <td>
        <div id= "picright">
            <img src="https://placehold.co/418x347" alt="tripod" width="200"> <br>
            caption of pic 2
        </div>
            <div id= "picleft">
            <img src="https://placehold.co/2863x2404" alt="tripod" width= "280">
                caption of pic 3
        </div>
        </td>
    </tr>
</tbody>
</table>

问题出在这儿： #

1. 你给偶数行加了固定高度350px，但左边单元格的图片没限制宽度，直接把行高撑得超过了350px，右边单元格内容没那么高，自然就留了空白。
2. 表格单元格默认是基线对齐，内容不会顶到上边，也会显得下方空白更多。

怎么改： #

方法一：让表格自适应内容（推荐）

把偶数行的固定高度删掉，再给图片加个宽度限制，避免撑爆表格：

#pss tr:nth-child(even){
    background-color: #f2f2f2;
    /* 移除这行：height: 350px; */
}

#pss img {
    max-width: 100%; /* 图片自动适配单元格宽度 */
    height: auto; /* 保持图片比例不变 */
}

方法二：让内容顶格对齐（可选）

如果希望单元格里的内容从顶部开始排，给td加个垂直对齐属性：

#pss td {
  border: 1px solid #ddd;
  height: 180px;
  vertical-align: top; /* 内容顶部对齐 */
}

内容的提问来源于stack exchange，提问作者Madlynn