Как позиционировать ячейки, сохраняя baseline выравнивание

Question

Есть таблица. В таблице применено выравнивание flex baseline. Как в случае 2-х и более строк поднимать контент ячеек выше ?

нужно так

Answer 1

Заворачиваем ячейки с данными в два вложенных флекс-блока:

Внутренний выравнивает ячейки с текстом по базовой линии.
А внешний выравнивает его по своей центральной оси.

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

Добавил границы между строками, чтобы было видно, как смещается текст в ячейках.

https://codepen.io/glebkema/pen/XWaZNEP?editors=1100

/* Суть дела */
.mainrow {
  display: flex;
  align-items: center;
}
.subrow {
  display: flex;
  align-items: baseline;
}

/* Красота для наглядности */
.mainrow {
  border-top: 2px solid blue;
  font: bold 14px Verdana, sans-serif;
  margin: 0;
  min-height: 80px;
}
.mainrow:last-of-type {
  border-bottom: 2px solid blue;
}
.text {
  padding: 0 15px;
}
.subrow,
.text:nth-child(2) {
  flex-grow: 1;
}

<div class="mainrow">
  <div class="subrow">
    <div class="text">03/01/2021</div>
    <div class="text">Одна строка</div>
    <div class="text">9,999,999 MXN</div>
    <div class="text">1234567890</div>
  </div>
</div>

<div class="mainrow">
  <div class="subrow">
    <div class="text">03/01/2021</div>
    <div class="text">Две <br>строки</div>
    <div class="text">9,999,999 MXN</div>
    <div class="text">1234567890</div>
  </div>
</div>

<div class="mainrow">
  <div class="subrow">
    <div class="text">03/01/2021</div>
    <div class="text">Три строки <br>начинаются <br>ещё выше</div>
    <div class="text">9,999,999 MXN</div>
    <div class="text">1234567890</div>
  </div>
</div>

Answer 2

Без исходного кода, не совсем понятно, где и как используется flex. Для таблицы достаточно простого вертикального выравнивания:

table { border-collapse: collapse; }

tr {
  font: bold 14px sans-serif;
  vertical-align: top;
}

td {
  padding: 1em;
  border-top: 1px solid #eee;
  border-bottom: 1px solid #eee;
}

<table>
  <tr>
    <td>01/01/2021</td>
    <td>Goasassdanez-Lwwgoeyv</td>
    <td>9,999,999 MXN</td>
    <td>2131231213123123</td>
  </tr>
  <tr>
    <td>03/01/2021</td>
    <td>J2ohssasdasdsdfsdfaasdsdes<br>2asssDow</td>
    <td>9,999,999 MXN</td>
    <td>sd231112112222323sd</td>
  </tr>
  <tr>
    <td>05/01/2021</td>
    <td>J2ohssasda<br>sdsdfsdf<br>aasdsdes</td>
    <td>9,999,999 MXN</td>
    <td>122223</td>
  </tr>
</table>

БЛОГ НА HUSL

Как позиционировать ячейки, сохраняя baseline выравнивание

Ответы (2 шт):