css 无法在行中插入内部tr

lsmd5eda 于 2022-12-01 发布在其他

关注(0)|答案(1)|浏览(100)

我正在尝试使用HTML、CSS和JS制作一个NBA实况比分网站。我在比赛比分下面添加一个内部tr时遇到了麻烦。
以下是我的表格目前的外观：

下面是我目前的代码JS和HTML：（我目前的JS正在构建表，并使用innerHTML修改tableData id下的表）
第一个
下面是我希望它看起来的样子（尽管居中效果更好）以及我用来构建示例的代码：

<table>
<thead>
  <tr>
  <th width= 40% text-align= right;>Home</th>
  <th width= 20%; colspan= "2">Scores</th>
  <th width= 40%; text-align= left;>Away</th>
  </tr>
  </thead>

  <tbody id="tableData">

<tr>
  <td rowspan="2">Celtics<img src=${item.team1Img}></td>
  <td>50</td>
  <td>65</td>
  <td rowspan="2"><img src=${item.team2Img}>Washington Wizards</td>
 </tr>
  <tr>
    <td colspan="2">3QR</td>
  </tr>
  
  </tbody>
</table>

基本上，我希望“4 QR”直接在分数下，仍然在同一行的球队名称。
提前感谢！

css

来源：https://stackoverflow.com/questions/74595347/unable-to-insert-inner-tr-in-a-row

1条答案

按热度按时间

pqwbnv8z1#

在你的javascript模板文字中，你忘了放rowspan="2"，这导致了一切都转移了。

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>`;

你会注意到你的表格在构建时缺少了两个单元格。一旦你用"行跨度""添加"了这两个单元格，它就会全部放回原位。

赞(0）回复(0）举报 2022-12-01

我来回答

css 无法在行中插入内部tr

1条答案

相关问题

热门标签

最新问答