Horizontally center table row

I have a table which looks like this:

What I'd like is the bottom row to be centered horizontally, so that it will look like this:

How would I go about doing this? Note that the table will be dynamic and can have an even or odd number of elements in the last row.

Code: https://jsfiddle.net/czyuyt05/2/

<table class="dna-table">
  <tr class="dna-row">
    <td class="dna-element"><p class="symbol">Co</p></td>
    <td class="dna-element"><p class="symbol">Cn</p></td>
    <td class="dna-element"><p class="symbol">En</p></td>
    <td class="dna-element"><p class="symbol">Ps</p></td>
    <td class="dna-element"><p class="symbol">Gr</p></td>
  </tr>
  <tr class="dna-row">
    <td class="dna-element"><p class="symbol">Pr</p></td>
    <td class="dna-element"><p class="symbol">Rs</p></td>
    <td class="dna-element"><p class="symbol">In</p></td>
   </tr>
 </table>

CSS

.dna-table {

}

.dna-row {
  text-align: center;
  margin: auto;
  width: 100%;
}

.dna-element {
  border: 1px solid gray;
  width: 100px;
  height: 120px;
  text-align: center;
  margin: auto;
 }

.symbol {
  font-size: 30px;
  font-weight: bold;
}