如何在同一表格单元格的同一行展示两个不同ID的内容？附括号需求

方法1：用CSS调整块元素布局并添加括号 #

原代码里的<div>是块级元素，默认独占一行，只需给两个目标div设置行内块样式，再通过CSS伪元素给第二个数据自动添加括号：

<td>
  <div class="rcelldata">
    <div id="r_laps"></div>
    <div id="r_dfs"></div>
  </div>
</td>

对应的CSS：

#r_laps, #r_dfs {
  display: inline-block;
  margin: 0 2px; /* 可选，给内容间加少量间距 */
}
#r_dfs::before {
  content: " (";
}
#r_dfs::after {
  content: ")";
}

方法2：替换为行内元素<span> #

直接把<div>换成<span>（行内元素默认在同一行显示），同时手动写好括号的结构：

<td>
  <div class="rcelldata">
    <span id="r_laps"></span>
    <span> (<span id="r_dfs"></span>)</span>
  </div>
</td>

这种方式不需要额外CSS，JavaScript仍可正常给r_laps和r_dfs赋值。

方法3：通过JavaScript直接拼接内容 #

如果不想改动HTML结构，可在JS获取到数据后，直接拼接成目标格式插入到单个容器中，再隐藏另一个容器：

// 假设lapsData、dfsData是你拿到的两个数据
const lapsData = "你的r_laps数据";
const dfsData = "你的r_dfs数据";
document.getElementById('r_laps').textContent = `${lapsData} (${dfsData})`;
document.getElementById('r_dfs').style.display = 'none';

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