如何实现多行垂直堆叠按钮/列表项的文本水平对齐及交互

需求场景 #

• 实现类表格/CSS Grid布局，支持多行文本自动对齐，列宽根据内容自动适配
• 行/列表项需支持：点击交互、tabindex获取焦点、边框样式、交替背景色
• 核心痛点：多行内容时，需要将多个<tr>在交互（点击、焦点）和视觉效果上归为一组；尝试display: contents分组但无法绑定交互事件，且不想使用传统表格布局或position: absolute这类临时方案

实现方案 #

使用<tbody>标签包裹需要分组的<tr>，完美解决交互与视觉分组问题，优势如下：

1. 交互统一：直接为<tbody>绑定点击事件、设置tabindex，实现整组的焦点响应与点击触发
2. 视觉整合：通过CSS为<tbody>设置交替背景、边框，让组内<tr>形成视觉整体
3. 布局自适应：保留表格的自动列宽适配能力，无需手动控制列宽

代码示例 #

HTML结构

<table>
  <!-- 第一组 -->
  <tbody tabindex="0" class="group-row">
    <tr>
      <td>内容较长的第一列</td>
      <td>短列内容</td>
    </tr>
    <tr>
      <td>第一行补充说明</td>
      <td>第二行补充说明</td>
    </tr>
  </tbody>
  <!-- 第二组 -->
  <tbody tabindex="0" class="group-row">
    <tr>
      <td>普通长度列</td>
      <td>内容较长的第二列</td>
    </tr>
    <tr>
      <td>更多详情内容</td>
      <td>另一栏更多详情</td>
    </tr>
  </tbody>
</table>

CSS样式

.group-row {
  cursor: pointer;
  border: 1px solid #ddd;
  margin: 8px 0;
  display: table;
  width: 100%;
}
.group-row:focus {
  outline: 2px solid #2196F3;
}
/* 交替背景色 */
.group-row:nth-child(odd) {
  background-color: #f9f9f9;
}
.group-row:nth-child(even) {
  background-color: #ffffff;
}
.group-row tr {
  border-bottom: 1px solid #eee;
}
.group-row tr:last-child {
  border-bottom: none;
}
.group-row td {
  padding: 8px;
  text-align: left;
}

效果说明 #

• 每个<tbody>包裹的多行视为一个整体，点击组内任意位置都会触发整组的点击事件
• Tab键切换焦点时，焦点落在整个分组上，而非单个行元素
• 交替背景与边框清晰划分组边界，列宽自动适配各列最长内容，保持对齐

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