使用dompdf时，如何让table的td内col2元素自适应底部对齐？

问题描述 #

使用内联CSS生成dompdf时，因dompdf不支持absolute定位，需让div.col2元素显示在td底部。尝试rowspan时遇到get_cellmap null报错，且左侧绿色div高度可变，无法给右侧flex容器设置固定高度，需要让div.col2占据td剩余空间实现底部对齐。

原始代码示例 #

<table style="width:100%">
<tr>
  <td style="width:70%">
    <div style="height:300px;background-color:green;">
    
    </div>
  </td>
  <td>
  <div style="display:flex:flex-direction:column;align-items:stretch">
  
  
  <div class="col1">
    Top col
    </div>
    <div class="col2">
     power by
    </div>
    </div>
  </td>
</tr>
</table>

解决方案 #

针对dompdf的特性，通过以下调整实现需求：

• 给右侧<td>添加style="height:100%;"，使其继承表格行的高度
• 修正flex容器的属性写法（原代码display:flex:flex-direction:column语法错误），并添加height:100%;确保容器占满td高度
• 给div.col2添加margin-top: auto;，利用flex布局的自动margin特性将其推至容器底部

调整后的代码：

<table style="width:100%">
<tr>
  <td style="width:70%">
    <div style="height:300px;background-color:green;">
    
    </div>
  </td>
  <td style="height:100%;">
    <div style="display: flex; flex-direction: column; height: 100%;">
      <div class="col1">
        Top col
      </div>
      <div class="col2" style="margin-top: auto;">
       power by
      </div>
    </div>
  </td>
</tr>
</table>

原理说明 #

• td和flex容器设置height:100%，确保flex布局拥有与左侧绿色div一致的垂直空间
• margin-top: auto会让div.col2自动填充容器内的剩余垂直空间，无论左侧div高度如何变化，都能固定在td底部

内容的提问来源于stack exchange，提问作者B L Praveen