Unable to insert inner tr in a row-CodePudding

I'm trying to make a live NBA scores website using HTML, CSS, and JS. I'm having trouble adding a inner tr under the game scores.

Here's what my table currently looks like:

Here's my current code JS and HTML: (My current JS is building up the table and using innerHTML to modify the table under the tableData id)

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

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

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

 <tbody id="tableData">
 </tbody>
</table>

Here's what I want it to look like (although centered better) and the code I used to build the example:

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

Basically, I'd like the "4QR" to be directly under the scores and still on the same row as the team names.

Thanks in advance!

CodePudding user response：

In your javascript template literal, you forgot to put the rowspan="2" and it's caused everything to shift over.

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

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

You'll notice your table as constructed is missing 2 cells. Once you "add" those two cells in with the "rowspan", it will all fit back into place.