求助：HTML表格td元素边框无法包裹图片的解决方法

问题根源 #

你的代码里有两个核心错误导致边框异常：

• 表格结构不规范：所有<td>没嵌套在<tr>行标签内，浏览器自动修正后布局混乱，边框无法正常包裹内容
• CSS语法错误：td, th选择器里的border="10"是HTML属性写法，不是CSS语法，会被浏览器忽略

修复步骤 #

1. 修正表格结构

所有单元格<td>必须放在行<tr>内部，每行的单元格用一个<tr>包裹，示例结构：

<table>
  <tr>
    <td><img src="Option1_1.jpg" width="100%" height="100%"></td>
    <td><img src="Option2_1.jpg" width="140%" height="60%"></td>
    <td>This is a Test and this will show that it should adjust so yeah</td>
  </tr>
  <tr>
    <td><img src="Option1_2.jpg" width="100%" height="100%"></td>
  </tr>
  <!-- 后续所有图片单元格都要按这个格式放在<tr>里 -->
</table>

2. 修复CSS语法错误

删除无效的border="10"，保留正确的CSS边框声明：

td, th {
  border: 10px solid goldenrod;
}

3. 确保图片被单元格完全包裹

默认图片是行内块元素，可能导致单元格高度计算异常，给图片添加块级显示属性，同时建议用height: auto保持图片比例：

td img {
  display: block;
  width: 100%;
  height: auto;
}

可选优化：让表格边框更整齐

给表格添加边框合并属性，避免单元格之间出现空隙：

table {
  border-collapse: collapse;
}

完整修复后代码 #

CSS（Style.css）

body {
  background-color: lightblue;
  background-image: url("Cherry_Wood_bg.jpg");
}

h1 {
  font-family: Courier;
  font-size: 50px;
  color: pink;
}

table {
  border-collapse: collapse;
}

td, th {
  border: 10px solid goldenrod;
}

td img {
  display: block;
  width: 100%;
  height: auto;
}

HTML

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Combinations</title>
    <link rel="stylesheet" href="Style.css">
</head>
<body>
  <h1>Which Combination do you use?</h1>    

  <table>
    <tr>
      <td><img src="Option1_1.jpg"></td>
      <td><img src="Option2_1.jpg"></td>
      <td>This is a Test and this will show that it should adjust so yeah</td>
    </tr>
    <tr>
      <td><img src="Option1_2.jpg"></td>
    </tr>
    <tr>
      <td><img src="Option1_3.jpg"></td>
    </tr>
    <tr>
      <td><img src="Option1_4.jpg"></td>
    </tr>
    <tr>
      <td><img src="Option1_5.jpg"></td>
    </tr>
    <tr>
      <td><img src="Option1_6.jpg"></td>
    </tr>
    <tr>
      <td><img src="Option1_7.jpg"></td>
    </tr>
    <tr>
      <td><img src="Option1_8.jpg"></td>
    </tr>
    <tr>
      <td><img src="Option1_9.jpg"></td>
    </tr>
    <tr>
      <td><img src="Option1_10.jpg"></td>
    </tr>
    <tr>
      <td><img src="Option1_11.jpg"></td>
    </tr>
    <tr>
      <td><img src="Option1_12.jpg"></td>
    </tr>
    <tr>
      <td><img src="Option1_13.jpg"></td>
    </tr>
    <tr>
      <td><img src="Option1_14.jpg"></td>
    </tr>
    <tr>
      <td><img src="Option1_15.jpg"></td>
    </tr>
    <tr>
      <td><img src="Option1_16.jpg"></td>
    </tr>
    <tr>
      <td><img src="Option1_17.jpg"></td>
    </tr>
    <tr>
      <td><img src="Option1_18.jpg"></td>
    </tr>
    <tr>
      <td><img src="Option1_19.jpg"></td>
    </tr>
    <tr>
      <td><img src="Option1_20.jpg"></td>
    </tr>
    <tr>
      <td><img src="Option1_21.jpg"></td>
    </tr>
    <tr>
      <td><img src="Option1_22.jpg"></td>
    </tr>
    <tr>
      <td><img src="Option1_23.jpg"></td>
    </tr>
    <tr>
      <td><img src="Option1_24.jpg"></td>
    </tr>
  </table>
</body>
</html>

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