Align div inside table cell once when one centered

Question

I am trying to do something that should be fairly simple. I have a column of text in a table that has values ​​from 1 to 18. I want the cell to have text to align the center. However, sometimes the same cell must display an asterisk (*). When an asterisk is displayed, it should be left-aligned in the same cell, while keeping the numbers fully aligned.

I can not get it to align correctly

<table border=1>
  <tr>
    <td style="text-align:center" width=50>
      <div>
        <div style="float:left;">*</div>
        <div>14</div>
      </div>  
    </td>
  </tr>
  <tr>
    <td align=center>
      <div></div>
      <div>16</div>
    </td>
  </tr>
</table>

Run code

Answer 1

Just lead position: absoluteto divwith an asterisk and your numbers will always be correctly centered:

<table border=1>
  <tr>
    <td style="text-align:center" width=50>
      <div>
        <div style="position: absolute;">*</div>
        <div>14</div>
      </div>  
    </td>
  </tr>
  <tr>
    <td align=center>
      <div></div>
      <div>16</div>
    </td>
  </tr>
</table>

Run code

position: absolute : " div". div , , , , div DOM.

, , 100% , . "position: absolute" - : https://www.w3schools.com/css/css_positioning.asp