Как выровнять вложенные элементы начальной загрузки

Question

Я столкнулся с проблемой, пытаясь выровнять вложенный элемент начальной загрузки.

.mi-flex-group {
  width: 100%;
}

.block {
  background: #333;
  color: #fff;
  text-align: center;
  vertical-align: middle;
  width: 100%;
}

.source {
  padding: 10px;
  width: 100%;
}

.source:nth-child(1) {
  background-color: lightgreen;
}

.source:nth-child(2) {
  background-color: #28a745;
}

.source:nth-child(3) {
  background-color: #ffc107;
}

.source:nth-child(4) {
  background-color: #dc3545;
}

.source:nth-child(5) {
  background-color: #007bff;
}

.source:nth-child(6) {
  background-color: brown;
}

.source:nth-child(7) {
  background-color: violet;
}

.source:nth-child(8) {
  background-color: darkviolet;
}

.source:nth-child(9) {
  background-color: orangered;
}

<link href="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/4.1.3/css/bootstrap.min.css" rel="stylesheet" />
<div class="container">
  <table class="table table-bordered table-hover" style="overflow-x: auto;">
    <thead>
      <tr>
        <th></th>
        <th>COL A</th>
        <th>COL B</th>
        <th>COL C</th>
        <th>COL D</th>
        <th>COL E</th>
        <th>COL F</th>
        <th>COL G</th>
        <th>COL H</th>
      </tr>
    </thead>
    <tbody>
      <tr>
        <th>ROW 1</th>
        <td>
          <div class="d-flex mi-flex-group w-100">
            <div class="d-flex flex-column w-100">
              <div class="d-flex">
                <div class="p-1 block">BS</div>
              </div>
              <div class="d-flex">
                <div class="source" title="S1"></div>
                <div class="source" title="S2"></div>
                <div class="source" title="S3"></div>
              </div>
            </div>
          </div>
        </td>
        <td>
          <div class="d-flex mi-flex-group w-100">
            <div class="d-flex flex-column mr-1 w-50">
              <div class="d-flex">
                <div class="p-1 block">BS</div>
              </div>
              <div class="d-flex">
                <div class="source" title="S1"></div>
                <div class="source" title="S2"></div>
                <div class="source" title="S3"></div>
                <div class="source" title="S4"></div>
              </div>
            </div>
            <div class="d-flex flex-column w-50">
              <div class="d-flex">
                <div class="p-1 block">PK</div>
              </div>
              <div class="d-flex">
                <div class="source" title="S1"></div>
                <div class="source" title="S2"></div>
                <div class="source" title="S3"></div>
                <div class="source" title="S4"></div>
              </div>
            </div>
          </div>
        </td>
        <td>
          <div class="d-flex mi-flex-group w-100">
            <div class="d-flex flex-column mr-1 w-50">
              <div class="d-flex">
                <div class="p-1 block">BS</div>
              </div>
              <div class="d-flex">
                <div class="source" title="S1"></div>
                <div class="source" title="S2"></div>
                <div class="source" title="S3"></div>
                <div class="source" title="S4"></div>
              </div>
            </div>
            <div class="d-flex flex-column w-50">
              <div class="d-flex">
                <div class="p-1 block">PK</div>
              </div>
              <div class="d-flex">
                <div class="source" title="S1"></div>
                <div class="source" title="S2"></div>
                <div class="source" title="S3"></div>
              </div>
            </div>
          </div>
        </td>
        <td>
          <div class="d-flex mi-flex-group w-100">
            <div class="d-flex flex-column mr-1 w-50">
              <div class="d-flex">
                <div class="p-1 block">BS</div>
              </div>
              <div class="d-flex">
                <div class="source" title="S2"></div>
                <div class="source" title="S3"></div>
                <div class="source" title="S4"></div>
              </div>
            </div>
            <div class="d-flex flex-column w-50">
              <div class="d-flex">
                <div class="p-1 block">PK</div>
              </div>
              <div class="d-flex">
                <div class="source" title="S1"></div>
                <div class="source" title="S2"></div>
                <div class="source" title="S3"></div>
                <div class="source" title="S4"></div>
              </div>
            </div>
          </div>
        </td>
        <td>
          <div class="d-flex mi-flex-group w-100">
            <div class="d-flex flex-column mr-1 w-50">
              <div class="d-flex">
                <div class="p-1 block">BS</div>
              </div>
              <div class="d-flex">
                <div class="source" title="S1"></div>
                <div class="source" title="S2"></div>
                <div class="source" title="S3"></div>
                <div class="source" title="S4"></div>
              </div>
            </div>
            <div class="d-flex flex-column w-50">
              <div class="d-flex">
                <div class="p-1 block">PK</div>
              </div>
              <div class="d-flex">
                <div class="source" title="S1"></div>
                <div class="source" title="S2"></div>
                <div class="source" title="S3"></div>
                <div class="source" title="S4"></div>
              </div>
            </div>
          </div>
        </td>
        <td></td>
        <td></td>
        <td></td>
      </tr>
      <tr>
        <th>ROW 2</th>
        <td>
          <div class="d-flex mi-flex-group w-100">
            <div class="d-flex flex-column w-100">
              <div class="d-flex">
                <div class="p-1 block">BS</div>
              </div>
              <div class="d-flex">
                <div class="source" title="S1"></div>
              </div>
            </div>
          </div>
        </td>
        <td>
          <div class="d-flex mi-flex-group w-100">
            <div class="d-flex flex-column mr-1 w-50">
              <div class="d-flex">
                <div class="p-1 block">BS</div>
              </div>
              <div class="d-flex">
                <div class="source" title="S1"></div>
                <div class="source" title="S2"></div>
                <div class="source" title="S3"></div>
                <div class="source" title="S4"></div>
                <div class="source" title="S5"></div>
                <div class="source" title="S6"></div>
                <div class="source" title="S7"></div>
                <div class="source" title="S8"></div>
                <div class="source" title="S9"></div>
              </div>
            </div>
            <div class="d-flex flex-column w-50">
              <div class="d-flex">
                <div class="p-1 block">PK</div>
              </div>
              <div class="d-flex">
                <div class="source" title="S1"></div>
                <div class="source" title="S2"></div>
                <div class="source" title="S3"></div>
                <div class="source" title="S4"></div>
              </div>
            </div>
          </div>
        </td>
        <td>
          <div class="d-flex mi-flex-group w-100">
            <div class="d-flex flex-column mr-1 w-50">
              <div class="d-flex">
                <div class="p-1 block">BS</div>
              </div>
              <div class="d-flex">
                <div class="source" title="S1"></div>
                <div class="source" title="S2"></div>
                <div class="source" title="S3"></div>
                <div class="source" title="S4"></div>
              </div>
            </div>
            <div class="d-flex flex-column w-50">
              <div class="d-flex">
                <div class="p-1 block">PK</div>
              </div>
              <div class="d-flex">
                <div class="source" title="S1"></div>
                <div class="source" title="S2"></div>
                <div class="source" title="S3"></div>
                <div class="source" title="S4"></div>
              </div>
            </div>
          </div>
        </td>
        <td></td>
        <td></td>
        <td></td>
        <td></td>
        <td></td>
      </tr>
    </tbody>
  </table>
</div>

Вы можете увидеть эффект в ROW 1 / COL D и ROW 2 / COL B , где нижнийперекрытия строк ...

единственный способ, который я нашел, чтобы настроить это, это изменить заполнение на более низкое значение, например, 5px:

.source {
  padding: 5px;
  width: 100%;
}

но это делает его довольно маленьким ...
примечание: идея состоит в том, чтобы сделать эти прямоугольники "кликабельными" ...

любые предложения какисправить это правильно?