<table class="table">
  <tr>
    <td class="element-cell">
      <table class="element">
        <tr>
          <td class="period">7</td>
          <td class="symbol" rowspan="2">N</td>
        </tr>
        <tr>
          <td class="mass">14.067</td>
        </tr>
        <tr>
          <td class="name" colspan="2">Азот</td>
        </tr>
      </table>
    </td>
    <td class="element-cell">
      <table class="element">
        <tr>
          <td class="period">7</td>
          <td class="symbol" rowspan="2">N</td>
        </tr>
        <tr>
          <td class="mass">14.067</td>
        </tr>
        <tr>
          <td class="name" colspan="2">Азот</td>
        </tr>
      </table>
    </td>
  </tr>
</table>

.table {
  width: 100%;
  border-collapse: collapse;
}
.element-cell {
  padding: 0;
}
.element tbody, .element tr {
  display: contents;
}
.element td {
  padding: 10px;
}
.element {
  border: 1px solid;
  font: 14px/1.5 Arial, sans-serif;
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  grid-template-areas: "period symbol" "mass symbol" "name name"
}
.period {
  grid-area: period;
  margin-bottom: 40px;
  border-bottom: 1px solid;
}
.symbol {
  grid-area: symbol;
  align-content: center;
  text-align: center;
  margin-left: 40px;
  border-left: 1px solid;
  position: relative;
}
.symbol::before {
  content: '';
  position: absolute;
  top: 0;
  bottom: 0;
  left: -41px;
  width: 1px;
  background: currentColor;
}
.mass {
  grid-area: mass;
  border-top: 1px solid;
}
.name {
  border-top: 1px solid;
  grid-area: name;
  text-align: right;
}