Python FPDF：为索引页单元格间添加未知宽度的虚线方法

架构老林

2026-8-12

实现索引页名称与页码间的自适应虚线分隔

下面提供几种无需指定固定宽度的方案，自动适配标题长度：

方法1：Flex布局（推荐，简洁灵活）

利用flex的弹性空间分配特性，让虚线自动填充标题与页码间的剩余区域：

<div class="index-item">
  <span class="index-title">第一章：入门指南</span>
  <span class="index-dash"></span>
  <span class="index-page">5</span>
</div>

.index-item {
  display: flex;
  align-items: center;
  margin: 8px 0;
}
.index-title {
  white-space: nowrap; /* 防止标题换行打乱布局，按需移除 */
  margin-right: 8px;
}
.index-dash {
  flex: 1; /* 占满剩余可用空间 */
  border-bottom: 1px dashed #333;
  margin: 0 8px;
}
.index-page {
  white-space: nowrap;
}

方法2：Table布局（适合传统排版场景）

通过表格的自动宽度分配，让中间列承载虚线：

<table class="index-table">
  <tr>
    <td class="index-title">第二章：高级技巧</td>
    <td class="index-dash"></td>
    <td class="index-page">18</td>
  </tr>
</table>

.index-table {
  width: 100%;
  border-collapse: collapse;
}
.index-title {
  white-space: nowrap;
  padding-right: 8px;
}
.index-dash {
  width: 100%;
  border-bottom: 1px dashed #333;
}
.index-page {
  white-space: nowrap;
  padding-left: 8px;
}

方法3：CSS Grid布局（现代排版方案）

用网格布局的比例分配快速实现：

<div class="index-grid">
  <span class="index-title">第三章：实战案例</span>
  <span class="index-dash"></span>
  <span class="index-page">32</span>
</div>

.index-grid {
  display: grid;
  grid-template-columns: auto 1fr auto; /* 自动-剩余-自动 */
  align-items: center;
  gap: 8px;
  margin: 8px 0;
}
.index-dash {
  border-bottom: 1px dashed #333;
}