如何用HTML表格实现带说明的文本列表并调整行间距？

Hey there! Let's solve that compact row spacing issue for your table-based text list. Since you prefer tables for the convenience of adding new rows via TAB in most editors, here's a clean CSS approach to tighten up the spacing without losing readability:

Step 1: HTML Table Structure #

First, set up your table with rows for each text-description pair. This structure plays nicely with editor TAB shortcuts for adding new rows:

<table class="compact-text-list">
  <tr>
    <td>基础文本项1</td>
    <td>这是第一项的补充说明，用来解释文本的含义或用途</td>
  </tr>
  <tr>
    <td>基础文本项2</td>
    <td>第二项的说明内容，可以简短或详细，按需调整</td>
  </tr>
  <tr>
    <td>基础文本项3</td>
    <td>简短说明示例</td>
  </tr>
</table>

Step 2: CSS for Compact Spacing #

The key to tight row spacing is controlling cell padding and line height, plus collapsing table borders to eliminate extra gaps:

.compact-text-list {
  width: 100%;
  border-collapse: collapse; /* 移除表格边框之间的默认间隙 */
  margin: 0; /* 去掉表格外部的默认边距 */
}

.compact-text-list tr {
  line-height: 1.2; /* 控制每行的整体高度，数值越小越紧凑（建议1.1-1.3） */
}

.compact-text-list td {
  padding: 3px 8px; /* 调整单元格内边距，上下值越小，行间距越紧凑 */
  border: none; /* 去掉默认边框，如需边框可改为 `1px solid #eee` 这类细边框 */
}

/* 可选：给基础文本列加样式区分，提升可读性 */
.compact-text-list td:first-child {
  font-weight: bold;
  width: 140px; /* 固定宽度让排版更整齐 */
  white-space: nowrap; /* 防止基础文本换行 */
}

Why This Works #

• border-collapse: collapse removes the default spacing between table cells and borders, which is a common source of "loose" table layouts.
• Tuning padding on the <td> elements lets you control exactly how much space sits inside each cell (smaller top/bottom padding = tighter rows).
• line-height adjusts the vertical space within each row, ensuring text doesn’t feel cramped even with small padding.

Comparison to Your Previous DIV Approach #

Your existing div-based solution using display: table-row works similarly, but tables are more editor-friendly for your use case (TAB to add rows). The core compactness logic is the same: controlling inner spacing (padding) and vertical line height—just applied to <td> instead of div children.

Optional Extras #

If you want to add subtle readability enhancements without losing compactness:

/* 奇偶行背景色区分 */
.compact-text-list tr:nth-child(even) {
  background-color: #f8f8f8;
}

/* 鼠标悬停高亮 */
.compact-text-list tr:hover {
  background-color: #f0f0f0;
}

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