如何用HTML/CSS在表格单元格或Div空白处填充水平线制作乐谱？

这里提供两种可行的方案，分别基于你现有的table结构和更灵活的div布局，都能实现歌词单元格剩余空白填充水平线的效果：

方案一：基于现有Table结构修改 #

利用CSS flex布局和伪元素实现，无需大幅改动原有HTML：

HTML代码 #

<table>
  <tr>
    <td>Csus4</td>
    <td>G</td>
  </tr>
  <tr class="lyrics-row">
    <td><span>Ly</span></td>
    <td><span>rics</span></td>
  </tr>
</table>

CSS代码 #

table {
  border-collapse: collapse;
  text-align: center;
  margin: 2em 0;
}

td {
  padding: 0 1.5em; /* 调整单元格左右间距，优化排版 */
}

.lyrics-row td {
  display: flex;
  align-items: flex-end; /* 让文字与水平线底部对齐 */
  justify-content: center; /* 保持和上方和弦居中对齐 */
  gap: 0.3em; /* 文字与水平线之间留小间距 */
}

.lyrics-row td::after {
  content: '';
  flex: 1;
  border-bottom: 1px solid #000; /* 水平线样式，可改为虚线dashed */
  min-width: 2em; /* 保证即使文字很短也有足够长度的水平线 */
}

.lyrics-row td span {
  flex-shrink: 0; /* 固定文字宽度，避免被拉伸 */
}

方案二：使用Div+Flex布局（更灵活） #

如果后续需要扩展复杂排版（比如多行歌词、和弦跨行），div布局会更易维护：

HTML代码 #

<div class="leadsheet">
  <div class="note-group">
    <div class="chord">Csus4</div>
    <div class="lyric"><span>Ly</span></div>
  </div>
  <div class="note-group">
    <div class="chord">G</div>
    <div class="lyric"><span>rics</span></div>
  </div>
</div>

CSS代码 #

.leadsheet {
  display: flex;
  gap: 1.5em; /* 每个和弦-歌词组之间的间距 */
  justify-content: center;
  margin: 2em 0;
}

.note-group {
  text-align: center;
  min-width: 5em; /* 保证每个组的最小宽度，避免拥挤 */
}

.chord {
  margin-bottom: 0.6em; /* 和弦与歌词的垂直间距 */
}

.lyric {
  display: flex;
  align-items: flex-end;
  justify-content: center;
  gap: 0.3em;
}

.lyric::after {
  content: '';
  flex: 1;
  border-bottom: 1px solid #000;
  min-width: 1.5em;
}

.lyric span {
  flex-shrink: 0;
}

自定义调整说明 #

• 可以修改border-bottom的样式，比如改为1px dashed #666实现虚线效果
• 调整padding、gap、min-width的值来适配不同的排版需求
• 如果需要歌词换行，只需在对应位置添加新的.lyric元素即可

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