如何适配HTML表格特定单元格高度？GST SUMMARY列设计求指导

1. 适配HTML表格特定单元格高度的方法 #

• 直接通过CSS指定高度：给目标单元格添加类名（如.custom-height），在样式中设置height属性，可配合vertical-align调整内容垂直位置。示例：

<style>
.custom-height {
  height: 80px;
  vertical-align: middle; /* 可选，让内容垂直居中 */
}
</style>
<table border="1">
  <tr>
    <td>普通单元格</td>
    <td class="custom-height">高度自定义的单元格</td>
  </tr>
</table>

• 若涉及合并单元格（rowspan），需确保合并后的单元格高度覆盖对应行数的默认高度，也可通过CSS强制调整。
• 注意：表格设置table-layout: fixed时，单元格高度更易受控。

2. GST SUMMARY列的设计思路与示例代码 #

从描述的设计来看，核心是利用**单元格跨行（rowspan）**实现单列单元格高度与其他行不一致的布局，配合CSS调整样式区分栏位。

模拟该设计的示例代码：

<style>
table {
  width: 100%;
  border-collapse: collapse;
  font-family: sans-serif;
}
td, th {
  border: 1px solid #ddd;
  padding: 12px;
  text-align: left;
}
.gst-summary {
  background-color: #f5f5f5;
  font-weight: bold;
}
.gst-summary td {
  vertical-align: top;
}
</style>
<table>
  <thead>
    <tr>
      <th>Description</th>
      <th>Qty</th>
      <th>Rate</th>
      <th>Amount</th>
      <th rowspan="5" class="gst-summary">GST SUMMARY<br>
        <small>CGST: $30<br>SGST: $30<br>Total GST: $60</small>
      </th>
    </tr>
  </thead>
  <tbody>
    <tr>
      <td>Product A</td>
      <td>2</td>
      <td>$100</td>
      <td>$200</td>
    </tr>
    <tr>
      <td>Product B</td>
      <td>1</td>
      <td>$150</td>
      <td>$150</td>
    </tr>
    <tr>
      <td>Product C</td>
      <td>3</td>
      <td>$50</td>
      <td>$150</td>
    </tr>
    <tr>
      <td colspan="3">Subtotal</td>
      <td>$500</td>
    </tr>
  </tbody>
</table>

设计思路说明 #

• 使用rowspan="5"让GST SUMMARY单元格跨5行（表头1行+表体4行），自然形成与其他单元格不同的高度。
• 通过CSS给该单元格设置背景色、字体加粗，突出栏位区别。
• 若需在GST SUMMARY单元格内细分内容，可嵌套<div>或<p>标签排版，进一步模拟设计中的明细布局。

内容的提问来源于stack exchange，提问作者Naresh Kumar Saravanan