CSS, чтобы сделать таблицы одинаковой высоты, в том числе растянуть их вертикальные заголовки для строк?

Question

У меня есть несколько таблиц с вертикальной ячейкой заголовка слева, которая настроена на охват всех строк с использованием rowspan.

Вертикальный заголовок имеет свой собственный background-color.

Я хочу, чтобы все таблицы были одинаковой высоты, включая «растягивание» вертикального заголовка (или, по крайней мере, растяжение его background-color), в идеале без редактирования разметки HTML самой таблицы (например, добавления поддельных / пустых строк), и определенно без JavaScript.

Demo Fiddle: https://jsfiddle.net/97owvn6f/3/

#tables {
  background-color: purple;
}

table {
  display: inline-block;
  background-color: lightblue;
  border-collapse: collapse;
  margin-right: 50px;
}

th,
td {
  padding: 10px;
  vertical-align: top;
}

.vertical-header {
  background-color: pink;
}

<div id="tables">
  <table>
    <tr>
        <th class="vertical-header" rowspan="3">A</th>
        <th colspan="4">My Short Table</th>
    </tr>
    <tr>
        <td>1</td>
        <td>Small widget</td>
    </tr>
    <tr>
        <td>2</td>
        <td>Medium widget</td>
    </tr>
</table>

<table>
    <tr>
        <th class="vertical-header" rowspan="11">B</th>
        <th colspan="3">My Tall Table</th>
    </tr>
    <tr>
        <td>1</td>
        <td>Small widget</td>
    </tr>
    <tr>
        <td>2</td>
        <td>Medium widget</td>
    </tr>
    <tr>
        <td>3</td>
        <td>Other widget</td>
    </tr>
    <tr>
        <td>4</td>
        <td>Other widget</td>
    </tr>
    <tr>
        <td>5</td>
        <td>Other widget</td>
    </tr>
    <tr>
        <td>6</td>
        <td>Other widget</td>
    </tr>
    <tr>
        <td>7</td>
        <td>Other widget</td>
    </tr>
    <tr>
        <td>8</td>
        <td>Other widget</td>
    </tr>
    <tr>
        <td>9</td>
        <td>Other widget</td>
    </tr>
    <tr>
        <td>10</td>
        <td>Other widget</td>
    </tr>
</table>
</div>

То, что у меня сейчас есть:

What I want:
введите описание изображения здесь

Answer 1

display: flex; в контейнере фиксирует высоту таблиц, чтобы заполнить доступное пространство, проблема в том, что tbody не растягивается до общей высоты, потому что он принимает только размер своих элементов tr.

Возможный обходной путь - сделать розовую полосу с линейным градиентом в качестве фона для таблиц:

#tables {
  background-color: purple;
  display: flex;
}

table {
  border-collapse: collapse;
  margin-right: 50px;
  display: inline-block;
  background: linear-gradient(90deg, pink 0%, pink 34px, lightblue 34px);
  background-size: 100% 100%;
  background-repeat: no-repeat;
}

th,
td {
  padding: 10px;
  vertical-align: top;
}

.vertical-header {
  width: 14px; /* +20px of padding = 34px for the pink stripe */
}

<div id="tables">
  <table>
        <tr>
            <th class="vertical-header" rowspan="3">A</th>
            <th colspan="4">My Short Table</th>
        </tr>
        <tr>
            <td>1</td>
            <td>Small widget</td>
        </tr>
        <tr>
            <td>2</td>
            <td>Medium widget</td>
        </tr>
    </table>

    <table>
        <tr>
            <th class="vertical-header" rowspan="11">B</th>
            <th colspan="3">My Tall Table</th>
        </tr>
        <tr>
            <td>1</td>
            <td>Small widget</td>
        </tr>
        <tr>
            <td>2</td>
            <td>Medium widget</td>
        </tr>
        <tr>
            <td>3</td>
            <td>Other widget</td>
        </tr>
        <tr>
            <td>4</td>
            <td>Other widget</td>
        </tr>
        <tr>
            <td>5</td>
            <td>Other widget</td>
        </tr>
        <tr>
            <td>6</td>
            <td>Other widget</td>
        </tr>
        <tr>
            <td>7</td>
            <td>Other widget</td>
        </tr>
        <tr>
            <td>8</td>
            <td>Other widget</td>
        </tr>
        <tr>
            <td>9</td>
            <td>Other widget</td>
        </tr>
        <tr>
            <td>10</td>
            <td>Other widget</td>
        </tr>
    </table>
</div>