如何调整表格特定单元格高度？自适应布局需求

核心实现目标 #

• 表格中「Row 1: Data」单元格高度与Header单元格完全一致
• <div class="column">Row 2</div>自动拉伸至容器底部，不依赖固定高度（适配动态内容）
• 所有内容在对应空间内居中显示

修改后的完整代码 #

CSS

/* CSS for the layout */
body {
  font-family: Arial, sans-serif;
  margin: 20px;
}

.table-container {
  display: flex;
  flex-direction: column;
  border: 4px solid grey;
  height: 80vh; /* 容器高度自适应视口，可按需调整 */
}

/* Header styling */
.header {
  display: flex;
  background-color: #f4f4f4;
  font-weight: bold;
  padding: 10px;
  border-bottom: 1px solid #ddd;
}

.header .header-text {
  display: flex;
  justify-content: center;
  align-items: center;
  flex: 1;
}

/* Content Section */
.content {
  display: flex;
  flex: 1; /* 占满容器剩余空间，保证左右区域等高 */
}

/* Image container */
.image-container {
  width: 150px;
  background-color: #f4f4f4;
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  padding: 10px;
  border-right: 1px solid #ddd;
}

.image-container img {
  max-width: 100%;
  max-height: 100%;
  object-fit: cover; /* 保持图片比例，避免变形 */
}

/* Table Styling */
.custom-table {
  width: 100%;
  border-collapse: collapse;
  margin: 0;
  display: flex;
  flex-direction: column;
  flex: 1; /* 占满右侧剩余空间 */
}

.custom-table tbody {
  display: flex;
  flex-direction: column;
  flex: 1; /* 让tbody填充表格高度 */
}

.custom-table tr {
  display: flex;
  width: 100%;
}

.custom-table td {
  border: 1px solid #ddd;
  padding: 10px;
  flex: 1;
  display: flex;
  justify-content: center;
  align-items: center;
}

/* 匹配Row1与Header的视觉高度 */
.custom-table tr:first-child td {
  background-color: #f4f4f4;
}

.custom-table tr:nth-child(even) td {
  background-color: #f9f9f9;
}

.row-2 {
  display: flex;
  flex: 1; /* 让Row2填充单元格剩余高度 */
  width: 100%;
}

.row-2 .column {
  flex: 1;
  display: flex;
  justify-content: center;
  align-items: center;
  padding: 10px;
}

.row-2 .column:not(:last-child) {
  border-right: 1px solid black;
}

HTML

<div class="table-container">
  <!-- Common Header spanning the image and table -->
  <div class="header">
    <div class="header-text">Header</div>
  </div>

  <!-- Content Section -->
  <div class="content">
    <!-- Image Container -->
    <div class="image-container">
      <img src="https://cdn.pixabay.com/photo/2016/09/29/08/33/apple-1702316_1280.jpg" alt="Main Image">
    </div>

    <!-- Table -->
    <table class="custom-table">
      <tbody>
        <tr>
          <td>Row 1: Data</td>
        </tr>
        <tr>
          <td colspan="2">
            <div class="row-2">
              <div class="column">Row 2</div>
            </div>
          </td>
        </tr>
      </tbody>
    </table>
  </div>
</div>

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