Как центрировать строчки таблицы по горизонтали при сохранении соответствующей структуры таблицы?

Question

Я пытаюсь центрировать строку в таблице, сохраняя при этом исходную структуру таблицы: поэтому без добавления делений td / tr. Есть ли способ сделать это, потому что я не могу найти один.

Поэтому я хочу, чтобы элементы последней строки были в центре (Pr и Rs)

.dna-table {
  text-align: center;
  margin: auto;
}

.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;
}

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

Answer 1

Изменив значение <tr> на display: flex; justify-content: center и добавив некоторый запас к вашим ячейкам (для имитации расстояния между ячейками), вы, вероятно, получите то, что хотите.

.dna-table {
  text-align: center;
  margin: auto;
}

.dna-row {
  text-align: center;
  margin: auto;
  width: 100%;
  display: flex; /*Add this*/
  justify-content: center; /*Add this*/
}

.dna-element {
  border: 1px solid gray;
  width: 100px;
  height: 120px;
  text-align: center;
  margin: 1px; /*Add this*/
 }
 
.symbol {
  font-size: 30px;
  font-weight: bold;
}

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

ОБНОВЛЕНИЕ Если вы не можете использовать flexbox, попробуйте изменить значение строки display на block и сделать ячейки display: inline-block;, затем установите text-align:center; в строке. Смотрите ниже:

.dna-table {
  text-align: center;
  margin: auto;
}

.dna-row {
  text-align: center;
  margin: auto;
  width: 100%;
  display: block; /*Add this*/
  text-align: center; /*Add this*/
}

.dna-element {
  border: 1px solid gray;
  width: 100px;
  height: 120px;
  text-align: center;
  display: inline-block; /*Add this*/
  margin: 1px; /*Add this*/
 }
 
.symbol {
  font-size: 30px;
  font-weight: bold;
}

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