CSS 使表格等高，包括垂直拉伸它们的行跨度 headers？

Question

我有几个 table 左侧有一个垂直 header 单元格，设置为使用 rowspan.

跨越所有行

垂直header有自己的background-color。

我希望 table 高度相同，包括“拉伸”垂直 header（或至少拉伸其 background-color），最好不编辑 HTML table 本身的标记（例如添加 fake/empty 行），绝对没有 JavaScript.

演示 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>

我目前拥有的：

我想要的：

Answer 1

display: flex; 在容器中固定表格的高度以填充可用的 space，问题是 tbody 没有拉伸到总高度，因为它只采用其大小tr 元素。

一个可能的解决方法是制作带有 linear-gradient 的粉红色条纹作为表格的背景：

#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>

CSS 使表格等高，包括垂直拉伸它们的行跨度 headers？

CSS to make tables equal height, including stretching their rowspan vertical headers?

html

css

css-tables

演示 Fiddle：https://jsfiddle.net/97owvn6f/3/