嘿，这个模拟手写印刷表格的需求我刚好做过类似的实现，给你推荐一个最适配打印场景的方案，用CSS Grid就能完美解决所有要求：

核心实现思路 #

我们需要的是一个固定列宽、固定行数、单元格内文本自动换行的结构，CSS Grid天生就适合这种布局场景：

• 用grid-template-columns定义每列的预定义宽度
• 用grid-template-rows设置固定的行数（每行高度也可以统一设置）
• 给单元格设置文本换行属性，确保长内容自动流转到下一行
• 内容不足时，手动或通过JS补充空单元格来填满预定义的行数

完整代码示例 #

HTML结构

<!-- 模拟2列、5行的印刷表格 -->
<div class="print-table">
  <!-- 已有内容单元格 -->
  <div class="cell">这是第一列的长文本内容，会自动换行到下一行，完美模拟手写填写的效果，不用担心内容溢出</div>
  <div class="cell">第二列的短文本</div>
  <div class="cell">第一列第二行内容</div>
  <div class="cell">第二列第二行内容</div>
  
  <!-- 补充空行单元格，填满5行 -->
  <div class="cell"></div>
  <div class="cell"></div>
  <div class="cell"></div>
  <div class="cell"></div>
  <div class="cell"></div>
  <div class="cell"></div>
</div>

CSS样式

.print-table {
  display: grid;
  /* 预定义2列宽度：第一列220px，第二列180px */
  grid-template-columns: 220px 180px;
  /* 预定义5行，每行高度45px（适配手写行高） */
  grid-template-rows: repeat(5, 45px);
  /* 去掉列间距，让边框完全贴合印刷表格样式 */
  gap: 0;
  /* 外层边框 */
  border: 1px solid #000;
  /* 可选：让表格居中 */
  margin: 2em auto;
}

.cell {
  /* 单元格边框，模拟印刷表格的分隔线 */
  border: 1px solid #000;
  /* 内边距，留出手写空间 */
  padding: 0.3em 0.6em;
  /* 文本自动换行，支持中英文 */
  overflow-wrap: break-word;
  /* 行高适配手写效果 */
  line-height: 1.5;
}

/* 打印专属样式优化，确保打印时无多余边距 */
@media print {
  body {
    margin: 0;
    padding: 0;
  }
  .print-table {
    width: 100%;
    margin: 0;
  }
}

动态补充空行（可选） #

如果内容是动态生成的，不想手动写空单元格，可以用JS自动补全：

const printTable = document.querySelector('.print-table');
const totalRows = 5; // 预定义行数
const columnCount = 2; // 预定义列数
const currentCellCount = printTable.children.length;
const neededCellCount = totalRows * columnCount;

// 计算需要补充的空单元格数量，自动创建
for (let i = currentCellCount; i < neededCellCount; i++) {
  const emptyCell = document.createElement('div');
  emptyCell.classList.add('cell');
  printTable.appendChild(emptyCell);
}

方案优势 #

• 完全适配打印场景：CSS Grid的布局在打印时不会出现错位，样式稳定
• 完美满足需求：固定列宽、固定行数、文本自动换行全部实现
• 灵活调整：只需要修改grid-template-columns和grid-template-rows的值就能快速调整表格结构
• 模拟真实印刷表格：边框样式完全贴合手写表格的视觉效果

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