html - 水平居中表格行

Question

我有一个看起来像这样的表:

我想要的是底部一行水平居中，这样它看起来像这样:

我该怎么做呢？请注意，该表将是动态的，并且在最后一行中可以包含偶数或奇数个元素。

代码: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;
}

Answer 1

三个tds前后可以加空td https://jsfiddle.net/czyuyt05/3/

<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></td>
    <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>
    <td></td>
   </tr>
 </table>