HTML WordWrap with Softwrap results in Table Text overflow(but Manual edit doesn't)

PyCharm 2023.3.3 (Community Edition)

HTML wordwraping with Softwrap results in Table Text overflow .

However when the same text is moved manually onto the next line , the wordwrap works fine.

Table Text Overflow Image - https://drive.google.com/file/d/1oBikHQNa5EqJOixs86iWFMdf8uz_tKFI/view?usp=sharing

In the code, row 8,9 overflowing text is manually moved to the next line and here the word wrap works but in rows 10,11 which are softwraped the wordwrap does not work.

HTML

  <tr>
      <th>10</th>
      <td>30</td>
      <td>13:18</td>
      <td>49436</td>
      <td><span style = "color : green">49900cC</span>,<span style = "color : green">49800cC</span>,<span style = "color : green">49700cC</span>,<span style = "color : green;text-decoration:underline">49500pS</span>,<span style = "color : green;text-decoration:underline">49400pS</span>,<span style = "color : green;text-decoration:underline">49300pS</span>,<span style = "color : green">49200pS</span>,<span style = "color : green">49100pS</span>,<span style = "color : green">49000pS</span></td>
      <td><span style = "color : green">48800pU</span></td>
      <td>(longAlert) Bank max +18  -25 mean +6 -9</td>
      <td><span style = "color : green">(49436)[49500]</span></td>
    </tr>
    <tr>
      <th>9</th>
      <td>30</td>
      <td>13:15</td>
      <td>49467</td>
      <td><span style = "color : red">50000cS</span>,<span style = "color : red">49900cS</span>,<span style = "color : red">49800cS</span>,<span style = "color : red;text-decoration:underline">49600pC</span>,
        <span style = "color : red;text-decoration:underline">49500pC</span>,<span style = "color : red;text-decoration:underline">49400pC</span>,<span style = "color : red;text-decoration:underline">49300pC</span>,<span style = "color : red">49200pC</span>,
        <span style = "color : red">49100pC</span>,<span style = "color : red">49000pC</span>,<span style = "color : red">48900pC</span>,</td>
      <td></td>
      <td>(short) Bank max -44  +70 mean -28 +46</td>
      <td></td>
    </tr>
    <tr>
      <th>8</th>
      <td>30</td>
      <td>13:15</td>
      <td>49467</td>
      <td><span style = "color : red">50000cS</span>,<span style = "color : red">49900cS</span>,<span style = "color : red">49800cS</span>,<span style = "color : red;text-decoration:underline">49600pC</span>,
        <span style = "color : red;text-decoration:underline">49500pC</span>,<span style = "color : red;text-decoration:underline">49400pC</span>,<span style = "color : red;text-decoration:underline">49300pC</span>,<span style = "color : red">49200pC</span>,
        <span style = "color : red">49100pC</span>,<span style = "color : red">49000pC</span>,<span style = "color : red">48900pC</span>,</td>
      <td></td>
      <td>(short) Bank max -44  +70 mean -28 +46</td>
      <td></td>
    </tr>

CSS

body{height:100%; width:100%; padding:0; margin:0;}

table { border-collapse:collapse; table-layout:fixed; width:100%; text-align : right; overflow-y: scroll;} overflow-x: hidden;}

td {border:solid 1px #fab; word-wrap:break-word;overflow-wrap: break-word;} th { background-color: rgb(100, 57, 0);text-align: center;} tr > *:nth-child(1) {min-width:10%; padding: 1px;margin: 10px; } tr > *:nth-child(2) {min-width:10%; padding: 1px;margin: 10px; }