如何在不使用tr的情况下将表格最后一个td下移并填充区域

可以通过CSS实现该需求，无需添加新的<tr>标签，以下提供两种可行方案：

方案一：使用CSS Grid重构表格布局 #

将表格转换为Grid容器，通过指定单元格的网格位置，让最后一个<td>占据下方区域，同时与同行其他单元格保持布局关联：

<!DOCTYPE html>
<html>
<head>
<style>
table {
  font-family: arial, sans-serif;
  border-collapse: collapse;
  width: 100%;
  display: grid;
  grid-template-columns: repeat(3, 1fr); /* 匹配表头3列宽度 */
  grid-auto-rows: auto;
}

th, td {
  border: 1px solid #dddddd;
  text-align: left;
  padding: 8px;
}

tr:nth-child(even) {
  background-color: #dddddd;
}

/* 表头行占满3列宽度 */
tr:first-child {
  grid-column: 1 / -1;
  display: grid;
  grid-template-columns: repeat(3, 1fr);
}

/* 数据行前3个单元格占据第一行网格 */
tr:nth-child(2) td:nth-child(-n+3) {
  grid-row: 1;
}

/* 最后一个单元格占据第二行整行 */
tr:nth-child(2) td:last-child {
  grid-column: 1 / -1;
  grid-row: 2;
}
</style>
</head>
<body>

<h2>HTML Table</h2>

<table>
  <tr>
    <th>Company</th>
    <th>Contact</th>
    <th>Country</th>
  </tr>
  <tr>
    <td>Alfreds Futterkiste</td>
    <td>Maria Anders</td>
    <td>Germany</td>
    <td>This I need Down row</td>
  </tr>
</table>

</body>
</html>

方案二：使用相对定位+预留空间 #

给目标<td>设置相对定位实现下移，同时给父<tr>添加底部内边距填充对应区域：

<!DOCTYPE html>
<html>
<head>
<style>
table {
  font-family: arial, sans-serif;
  border-collapse: collapse;
  width: 100%;
}

td, th {
  border: 1px solid #dddddd;
  text-align: left;
  padding: 8px;
}

tr:nth-child(even) {
  background-color: #dddddd;
}

/* 数据行设为相对定位，作为子元素定位参照 */
tr:nth-child(2) {
  position: relative;
  padding-bottom: 40px; /* 预留下移单元格的高度空间 */
}

/* 最后一个单元格下移并占满预留空间 */
tr:nth-child(2) td:last-child {
  position: absolute;
  left: 0;
  top: 100%;
  width: 100%;
  box-sizing: border-box;
}
</style>
</head>
<body>

<h2>HTML Table</h2>

<table>
  <tr>
    <th>Company</th>
    <th>Contact</th>
    <th>Country</th>
  </tr>
  <tr>
    <td>Alfreds Futterkiste</td>
    <td>Maria Anders</td>
    <td>Germany</td>
    <td>This I need Down row</td>
  </tr>
</table>

</body>
</html>

说明：方案一的Grid布局逻辑更清晰，符合现代CSS规范；方案二适合需要保留原生表格布局特性的场景，需手动调整预留空间高度。

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