Center table column by particular symbol (text only table)

I have a table with lots of data that I want to center on a specific symbol, with an elementary example shown in the code snippet.

.resolution {
  text-align: center;
}

<table>
  <tr>
    <td>Model</td>
    <td class="resolution">Resoluton</td>
  </tr>
  <tr>
    <td>Foo</td>
    <td class="resolution">4:3</td>
  </tr>
  <tr>
    <td>Bar</td>
    <td class="resolution">16:9</td>
  </tr>
    <tr>
    <td>Baz</td>
    <td class="resolution">21:9</td>
  </tr>
    <tr>
    <td>Qux</td>
    <td class="resolution">16:10</td>
  </tr>
</table>

As the snippet clearly shows, text-align: center is not very helpful in centering the cells with the symbol aligned exactly in the center and is dependent on the entriety of a cell's content. Is there a way to center the cells on a particular symbol, be it :, or something else entirely?