实现表格内所有div与最高div高度一致的技术方案

API 探路者

2026-6-22

实现.table-values容器内所有div高度统一的解决方案

问题说明

需要让.table-values容器内的所有.table-cell元素高度一致，匹配每行中最高单元格的高度，现有方案未生效，第一行单元格为最高项，其余行需对齐该高度。

解决方案

调整Flex布局的关键属性，确保所有单元格自动拉伸至容器最大高度：

显式声明.table-values的align-items: stretch，避免样式冲突导致子元素无法拉伸
设置.table-cell的height: 100%，让单元格填满父容器高度
给.des_of_goods内的.content添加height: 100%，确保内容区域填满单元格高度

修改后的CSS代码

.section-4 {
  width: 100%;
  border: 1px solid #000;
  border-top: 0;
}

.section-4 .table .table-header {
  display: flex;
  text-align: center;
  vertical-align: middle;
}

.section-4 .table .sr_no,
.section-4 .table .unit {
  border-right: 1px solid black;
  width: 3%;
}

.section-4 .table .unit {
  width: 5%;
}

.section-4 .table .qty {
  border-right: 1px solid black;
  width: 8.3%;
}

.section-4 .table .des_of_goods {
  border-right: 1px solid black;
  width: 49%;
}

.section-4 .table .table-values .des_of_goods .content {
  padding: 0 2px;
  height: 100%; /* 让content填满table-cell高度 */
}

.section-4 .table .rate,
.section-4 .table .disc,
.section-4 .table .tax-amt,
.section-4 .table .disc-amt {
  border-right: 1px solid black;
  width: 8.75%;
}

.section-4 .table .tax-amt {
  border-right: 0;
}

.section-4 .table .table-values {
  display: flex;
  align-items: stretch; /* 显式声明，确保子元素拉伸 */
}

.section-4 .table .table-values .table-cell {
  border-top: 1px solid black;
  height: 100%; /* 让table-cell填满父容器高度 */
  flex-grow: 1;
}

.section-4 .table .table-values .table-cell:not(:nth-child(2)) {
  display: flex;
  align-items: center;
  justify-content: center;
}

.section-4 .table .table-values .table-cell .add-info,
.section-4 .table .table-values .table-cell .order-info {
  display: flex;
  justify-content: space-between;
  align-items: center;
  width: 100%;
}

.section-4 .table .table-values .table-cell .des_of_goods .content {
  display: flex;
  flex-direction: column;
  justify-content: space-between;
}

.section-4 .table .table-values .table-cell .add-info p {
  white-space: nowrap;
}

对应的HTML代码（无需修改）

<section class="section-4">
  <div class="table">
    <div class="table-header">
      <div class="sr_no">
        <p><strong>SR No.</strong></p>
      </div>
      <div class="des_of_goods">
        <p><strong>Description of Goods</strong></p>
      </div>
      <div class="qty">
        <p><strong>Qty</strong></p>
      </div>
      <div class="unit">
        <p><strong>Unit</strong></p>
      </div>
      <div class="rate">
        <p><strong>Rate</strong></p>
      </div>
      <div class="disc">
        <p><strong>Disc. %</strong></p>
      </div>
      <div class="disc-amt">
        <p><strong>Discount Amount</strong></p>
      </div>
      <div class="tax-amt">
        <p><strong>Taxable Amount</strong></p>
      </div>
    </div>
    <div class="table-values">
      <div class="table-cell sr_no text-center">
        <p><strong>2</strong></p>
      </div>
      <div class="table-cell des_of_goods">
        <div class="content">
          <p><strong>TR45A/NS/5aSSHJLJ4- I : TR-45A : HEATSET : HEAT
                  SET R-45A HEATSET bLUE TR45A/NS/5aSSHJLJ4- I : TR-45A : HEATSET : HEAT
                  SET R-45A HEATSET bLUE</strong></p>
          <div class="add-info">
            <p>HSN : 6004100 </p>
            <p>Width: 60 ( inch ) </p>
            <p>Buyer Ref: VO240052 </p>
          </div>
          <div class="order-info">
            <p>Order no: SRFSO2425- 00429 </p>
            <p>Challan/Packing no: SRFSD2425- 03410</p>
          </div>
        </div>
      </div>
      <div class="table-cell qty text-center">
        <p>21,232.00</p>
      </div>
      <div class="table-cell unit text-center">
        <p>Mtr.</p>
      </div>
      <div class="table-cell rate text-center">
        <p>9,610.80</p>
      </div>
      <div class="table-cell disc text-center">
        <p>100.00</p>
      </div>
      <div class="table-cell disc-amt text-center">
        <p>10,000.00</p>
      </div>
      <div class="table-cell tax-amt text-center">
        <p>30,77,002.00</p>
      </div>
    </div>
    <div class="table-values">
      <div class="table-cell sr_no text-center">
        <p><strong>2</strong></p>
      </div>
      <div class="table-cell des_of_goods">
        <div class="content">
          <p><strong>TR45A/NS/5aSSHJLJ4- I : TR-45A : HEATSET : HEAT
                  SET R-45A HEATSET bLUE</strong></p>
          <div class="add-info">
            <p>HSN : 6004100 </p>
            <p>Width: 60 ( inch ) </p>
            <p>Buyer Ref: VO240052 </p>
          </div>
          <div class="order-info">
            <p>Order no: SRFSO2425- 00429 </p>
            <p>Challan/Packing no: SRFSD2425- 03410</p>
          </div>
        </div>
      </div>
      <div class="table-cell qty text-center">
        <p>21,232.00</p>
      </div>
      <div class="table-cell unit text-center">
        <p>Mtr.</p>
      </div>
      <div class="table-cell rate text-center">
        <p>9,610.80</p>
      </div>
      <div class="table-cell disc text-center">
        <p>100.00</p>
      </div>
      <div class="table-cell disc-amt text-center">
        <p>10,000.00</p>
      </div>
      <div class="table-cell tax-amt text-center">
        <p>30,77,002.00</p>
      </div>
    </div>
    <div class="table-values">
      <div class="table-cell sr_no text-center">
        <p><strong>2</strong></p>
      </div>
      <div class="table-cell des_of_goods">
        <div class="content">
          <p><strong>TR45A/NS/5aSSHJLJ4- I : TR-45A : HEATSET : HEAT
                  SET R-45A HEATSET bLUE</strong></p>
          <div class="add-info">
            <p>HSN : 6004100 </p>
            <p>Width: 60 ( inch ) </p>
            <p>Buyer Ref: VO240052 </p>
          </div>
          <div class="order-info">
            <p>Order no: SRFSO2425- 00429 </p>
            <p>Challan/Packing no: SRFSD2425- 03410</p>
          </div>
        </div>
      </div>
      <div class="table-cell qty text-center">
        <p>21,232.00</p>
      </div>
      <div class="table-cell unit text-center">
        <p>Mtr.</p>
      </div>
      <div class="table-cell rate text-center">
        <p>9,610.80</p>
      </div>
      <div class="table-cell disc text-center">
        <p>100.00</p>
      </div>
      <div class="table-cell disc-amt text-center">
        <p>10,000.00</p>
      </div>
      <div class="table-cell tax-amt text-center">
        <p>30,77,002.00</p>
      </div>
    </div>
  </div>
</section>

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

实现表格内所有div与最高div高度一致的技术方案

问题说明 #

解决方案 #

修改后的CSS代码 #

对应的HTML代码（无需修改） #

问题说明

解决方案

修改后的CSS代码

对应的HTML代码（无需修改）