NBA实时比分网站开发问题：无法在比分行下添加内部tr

直接修改你的JS代码，给球队名称单元格添加rowspan="2"属性，同时调整第二行<tr>的结构，就能实现目标布局：

else{
  data += `<tr>
    <td class="left" rowspan="2">${item.team1} <img src=${item.team1Img}></td>
    <td> ${item.score1} </td>
    <td> ${item.score2} </td>
    <td class="right" rowspan="2"><img src=${item.team2Img}>  ${item.team2}</td>
  </tr>

  <tr>
    <td colspan="2">${period}QR</td>
  </tr>`;
}

关键修改说明： #

• 给左右两个球队名称的<td>加上rowspan="2"，让它们跨越比分行和赛段行，实现上下合并的效果。
• 第二行的<tr>只保留一个<td colspan="2">，这个单元格会占据原比分单元格的位置，正好把赛段信息放在比分正下方。
• 移除原代码第二行多余的单元格，避免表格列数不匹配导致的布局错乱（浏览器会自动补全缺失单元格，造成显示异常）。

另外建议把表头的内联样式移到CSS中，让代码更整洁：

thead th:nth-child(1) { width:40%; text-align:right; }
thead th:nth-child(2) { width:20%; text-align:center; }
thead th:nth-child(3) { width:40%; text-align:left; }

修改后表格结构会和你提供的目标示例完全一致，赛段信息将正确显示在比分下方，球队名称也会实现上下合并。

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