如何用CSS让单个td填满含多个th的表格tbody整行？

当然可以实现，结合你提到的图片占满tbody的场景，这里给你两种可行方式：

方式一：HTML colspan属性（最稳定简便） #

直接给tbody里的<td>添加colspan="3"属性，让它跨占thead对应的3列，自然填满整行空间。如果td内是图片，再给图片设置宽高即可适配：

修改后的HTML代码：

<table>
 <thead>
  <tr>
     <th>1</th>
     <th>2</th>
     <th>3</th>
  </tr>
 </thead>
 
 <tbody>
   <tr>
    <td colspan="3">
      <img src="你的图片路径" alt="示例图片">
    </td>
   </tr>
 </tbody>
</table>

配套CSS（让图片填满td）：

tbody td img {
  width: 100%;
  height: 100%;
  object-fit: cover; /* 可选，保持图片比例同时填满容器，避免拉伸变形 */
}

方式二：纯CSS实现（无需修改HTML） #

如果不想改动HTML结构，可以通过调整表格布局规则实现：

1. 给表格设置固定布局并占满可用宽度；
2. 强制tbody里的<td>占满整行宽度；
3. 给图片设置宽高适配td容器。

完整CSS代码：

table {
  table-layout: fixed;
  width: 100%;
  border-collapse: collapse; /* 可选，优化边框显示效果 */
}

tbody td {
  width: 100%;
}

tbody td img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

注意：纯CSS方案的兼容性和稳定性略逊于colspan方式，尤其是表格列宽规则复杂的场景，优先推荐第一种方式。

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