Выровнять текст по вертикали в ячейке Tabulator

Question

Я просто пытаюсь создать таблицу с помощью Tabulator с вертикальным выравниванием текста в ячейке по центру, не сокращая текст до "..." в ячейках.

Проблема в том, когда я хочу set .tabulator-row {min-height: 60px! важный} - это происходит, ячейки находятся в верхней части ряда.

Следующий шаг - я установил:

.tabulator-cell { 
    height: 60px!important;
    vertical-align: middle!important;
    display: table-cell!important;
    word-wrap: break-word!important;
    white-space: normal!important;
        }

И кажется, что все в порядке ... но Я не хочу устанавливать ячейку на 60px высоты, потому что с большим текстом это выглядит неправильно. min-height не работает.

Это также происходит после изменения размера страницы. Столбцы разбиты. (?)

Я буду очень рад, если кто-то захочет мне помочь. Для меня очень важно установить высоту строки равной 60px с вертикальным выравниванием: по центру и без этого «...», когда текст длиннее ширины столбца.

var table = new Tabulator("#projects-table", {
  layout: "fitDataStretch",
  responsiveLayout: true,
  headerSort: false,
});

.tabulator {
  border: 0px white solid;
}

.tabulator-header .tabulator-col {
  border: 0px white solid!important;
  background-color: white!important;
}

.tabulator-header {
  border: 0px white solid!important;
  background-color: white!important;
}

.tabulator-row {
  border: 0px white solid!important;
}

.tabulator-row-od {
  background-color: #f8f9ff!important;
}

.tabulator.striped .tabulator-tableHolder .tabulator-table .tabulator-row:nth-child(1n) {
  background-color: #f8f9ff!important;
}

.tabulator-row-even {
  background-color: white!important;
}

.tabulator.striped .tabulator-tableHolder .tabulator-table .tabulator-row:nth-child(2n) {
  background-color: white!important;
}

.tabulator-col-title {
  font-family: Graphik;
  font-size: 16px;
  font-weight: bold;
  font-stretch: normal;
  font-style: normal;
  line-height: normal;
  letter-spacing: 0.1px;
  color: #424554;
}

.tabulator-row {
  min-height: 60px!important;
  border: 1px solid grey!important;
}

.tabulator-row .tabulator-cell {
  height: 60px!important;
  vertical-align: middle!important;
  display: table-cell!important;
  word-wrap: break-word!important;
  white-space: normal!important;
}

<link href="https://unpkg.com/tabulator-tables@4.5.3/dist/css/semantic-ui/tabulator_semantic-ui.min.css" rel="stylesheet" />
<script src="https://unpkg.com/tabulator-tables@4.5.3/dist/js/tabulator.min.js"></script>
<table id="projects-table" class="striped px-5">
  <thead class="px-4">
    <tr>
      <th></th>
      <th width="200">Surname</th>
      <th>Name</th>
      <th>Group</th>
      <th>Country</th>
      <th>City</th>
      <th>E-mail</th>
      <th tabulator-align="center">Start Date</th>
      <th tabulator-align="center">End Date</th>
      <th>Type</th>
      <th>Projects</th>
    </tr>
  </thead>
  <tbody class="px-5">
    <tr>
      <td></td>
      <td>ABC ABC ABC ABC ABC ABC ABC</td>
      <td>XX</td>
      <td>XX</td>
      <td>Y</td>
      <td>EX</td>
      <td>22/04/1994</td>
      <td>22/04/1994</td>
      <td>XX</td>
      <td>XX</td>
      <td>ABC ABC ABC ABC</td>
    </tr>
    <tr>
      <td></td>
      <td>ABC ABC ABCABC</td>
      <td>XX</td>
      <td>XX</td>
      <td>Y</td>
      <td>EX</td>
      <td>22/04/1994</td>
      <td>22/04/1994</td>
      <td>XX</td>
      <td>XX</td>
      <td>ABC ABC ABC ABC</td>
    </tr>
  </tbody>
</table>