如何在单个<td>内为各行设置整行背景（无需嵌套表格）

问题背景 #

我用CGI脚本生成带可变内容的表格，其中某个单元格里的多段字符串靠<br/>分隔成多行。想给这些行做交替背景色（之前已经给整个表格行实现过类似效果），于是把每个字符串包在带ro（奇数行）、re（偶数行）类的<span>里，但发现背景只覆盖文本部分，没法撑满整个单元格宽度。需要在不嵌套表格的前提下，让单元格内的每一行都能铺满背景。

解决方法 #

给包裹字符串的<span>额外加一个自定义类（比如l），通过CSS将它设置为inline-block并占满单元格宽度，就能让背景覆盖整行。同时可以给左侧列也同步交替背景效果。

调整前代码（问题状态） #

HTML

<table>
  <tr class="ro">
    <td>行1左侧内容</td>
    <td>
      <span class="ro">第一行字符串</span><br/>
      <span class="re">第二行字符串</span><br/>
      <span class="ro">第三行字符串</span>
    </td>
  </tr>
  <tr class="re">
    <td>行2左侧内容</td>
    <td>
      <span class="ro">字符串A</span><br/>
      <span class="re">字符串B</span>
    </td>
  </tr>
</table>

CSS

/* 交替背景色 */
.ro { background-color: #f5f5f5; }
.re { background-color: #e8e8e8; }

此时<span>是行内元素，背景仅包裹文本，无法铺满单元格宽度。

调整后代码（解决状态） #

HTML

<table>
  <tr class="ro">
    <td class="row-bg">行1左侧内容</td>
    <td>
      <span class="ro l">第一行字符串</span><br/>
      <span class="re l">第二行字符串</span><br/>
      <span class="ro l">第三行字符串</span>
    </td>
  </tr>
  <tr class="re">
    <td class="row-bg">行2左侧内容</td>
    <td>
      <span class="ro l">字符串A</span><br/>
      <span class="re l">字符串B</span>
    </td>
  </tr>
</table>

CSS

/* 交替背景色 */
.ro { background-color: #f5f5f5; }
.re { background-color: #e8e8e8; }

/* 关键：让span铺满单元格宽度 */
.l {
  display: inline-block;
  width: 100%;
  box-sizing: border-box; /* 防止内边距/边框超出单元格 */
  padding: 2px 4px; /* 可选：添加内边距提升可读性 */
}

/* 左侧列同步行背景 */
.row-bg {
  background-color: inherit;
}

效果说明 #

• .l类将<span>转换为inline-block元素，width: 100%使其撑满单元格宽度，背景色自然覆盖整行。
• box-sizing: border-box保证后续添加内边距或边框时，不会突破单元格边界。
• 左侧列的.row-bg类继承所在行的背景色，实现整行背景的统一交替效果。

内容的提问来源于stack exchange，提问作者U. Windl