如何让HTML表格首列宽度适配内容？wkhtmltopdf不支持CSS grid求替代方案

wkhtmltopdf基于旧版Qt WebKit内核，确实不支持CSS Grid、Flex等新布局特性，以下是兼容的实现方案：

方案1：使用原生标签（最稳定） #

原生表格的table-layout: auto特性天然支持首列随内容自适应，剩余列占满容器宽度，代码示例如下：

<style>
.content-table {
  width: 100%;
  border-collapse: collapse;
}
/* 首列不设置固定宽度，由内容自动撑开 */
.content-table td:first-child {
  padding: 8px;
  border: 1px solid #eee;
  white-space: nowrap; /* 可选，避免首列内容折行 */
}
/* 第二列自动填充剩余宽度 */
.content-table td:nth-child(2) {
  width: 100%;
  padding: 8px;
  border: 1px solid #eee;
}
</style>

<table class="content-table">
  <tr>
    <td>短内容</td>
    <td>剩余宽度填充内容</td>
  </tr>
  <tr>
    <td>更长的首列内容测试</td>
    <td>剩余宽度填充内容</td>
  </tr>
</table>

• 优势：兼容性最好，wkhtmltopdf全版本支持，不需要额外hack。

方案2：使用CSS Table布局（无需原生table标签） #

如果不想使用语义化的table标签，可以给div设置table相关的CSS属性，效果和原生table完全一致：

<style>
.table-container {
  display: table;
  width: 100%;
}
.table-row {
  display: table-row;
}
.first-col {
  display: table-cell;
  padding: 8px;
  border: 1px solid #eee;
  white-space: nowrap;
}
.second-col {
  display: table-cell;
  width: 100%;
  padding: 8px;
  border: 1px solid #eee;
}
</style>

<div class="table-container">
  <div class="table-row">
    <div class="first-col">短内容</div>
    <div class="second-col">剩余宽度填充内容</div>
  </div>
  <div class="table-row">
    <div class="first-col">更长的首列内容测试</div>
    <div class="second-col">剩余宽度填充内容</div>
  </div>
</div>

• 优势：结构更灵活，兼容旧版WebKit内核，布局效果和原grid方案完全一致。

方案3：浮动布局（仅适合单行/高度统一的场景） #

如果是单行布局场景，可以用浮动实现：

<style>
.row-container {
  width: 100%;
  overflow: hidden; /* 清除浮动 */
}
.first-col {
  float: left;
  padding: 8px;
  white-space: nowrap;
}
.second-col {
  overflow: hidden;
  padding: 8px;
}
</style>

<div class="row-container">
  <div class="first-col">首列内容</div>
  <div class="second-col">剩余宽度内容</div>
</div>

• 注意：如果左右列高度不一致，会出现布局错位，仅适合高度可控的场景。

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