I have two questions about HTML code.

This is the starting code.

<style>
th {
  height: 30px;
  background-color: #4970FF;
  color: white;
  font-size: 28px;
}

td {
  background-color: #FE4A49;
  color: #FAFAFA;
  font-size: 22px;
  vertical-align: middle;
}

table {
  margin: 0 auto;
}
</style>

<table>
  <thead>
    <tr>
      <th>" +
    XSNR +
    "</th>
    </tr>
  </thead>
  <tbody>
    <tr>
      <td>" +
    DGNR +
    "</td>
    </tr>
  </tbody>
</table>
 

• Question one, as shown in the picture, I want the current effect (Before) where the blue background color extends to make the whole line blue, and the red background rows follow the length of the number of characters in the red text, to achieve the (After) effect. Currently both background colors are equal lengths.
• Question two, if I want to add if code to append conditions, is this the way to write the code, or is there a more simplified method? Because I'm thinking if there are many if conditions, my code will become very long.()

if a:=1 then

<style>
th {
  height: 30px;
  background-color: #4970FF;
  color: white;
  font-size: 28px;
}

td {
  background-color: #FE4A49;
  color: #FAFAFA;
  font-size: 22px;
  vertical-align: middle;
}

table {
  margin: 0 auto;
}
</style>

<table>
  <thead>
    <tr>
      <th>" +
    XSNR +
    "</th>
    </tr>
  </thead>
  <tbody>
    <tr>
      <td>" +
    DGNR +
    "</td>
    </tr>
  </tbody>
</table>

else

<style>
th {
  height: 28px;
  background-color: #4970FF;
  color: white;
  font-size: 22px;
}

table {
  margin: 0 auto;
}
</style>
<table>
  <thead>
    <tr>
      <th>" +
            XSNR +
            "</th>
    </tr>
  </thead>
</table>

Thank you for your reply.