使用多行跨度时行高不正确

Question

编辑：请考虑我上次编辑的示例。

这一直适用于 Chrome、Edge 或 IE，但从不适用于 Firefox，并且此错误开始出现在 Chrome 的最后一次更新 (57) 中。 当我使用多个行跨度并且某些表格单元格有 2 行或更多行时，连续行高无法正常工作。

老实说，我的英语还在进步中，很难解释，所以我创建了一个示例：

https://codepen.io/anon/pen/xqoZZj

CSS

table {
  border-collapse: collapse;
  border-spacing: 0;
  border: 1px solid #dddddd;
}

table td, table th {
  border: 1px solid #dddddd;
}

.column-product {
  width: 30px;
}

HTML

<table>
  <thead>
    <tr>
      <th class="column-product">Product</th>
      <th>Color</th>
      <th>Qty</th>
      <th>Price</th>
    </tr>
  </thead>
  <tbody>
    <!-- 1st product -->
    <tr>
      <td rowspan="3">Epic Shorts</td>
    </tr>
    <tr>
      <td rowspan="2">Blue</td>
    </tr>
    <tr>
      <td>1</td>
      <td>10.20</td>
    </tr>
    <!-- 2nd product -->
    <tr>
      <td rowspan="5">Cool T-Shirt</td>
    </tr>
    <tr>
      <td rowspan="2">Black</td>
    </tr>
    <tr>
      <td>1</td>
      <td>10.00</td>
    </tr>
    <tr>
      <td rowspan="2">Green</td>
    </tr>
    <tr>
      <td>2</td>
      <td>7.10</td>
    </tr>
  </tbody>
</table>

如您所见，产品“Epic Shorts”只有一种变体 - 但它有 2 行，并且连续行的高度不遵循主行高度。 产品“酷 T 恤”没有出现此问题，因为它有 2 种变体（黑色和绿色）。

理想的结果是什么？

https://codepen.io/anon/pen/MpMyWX

我做的唯一改变是强制行的高度：

<!-- 1st product -->
<tr>
  <td rowspan="3">Epic Shorts</td>
</tr>
<tr>
  <td rowspan="2">Blue</td>
</tr>
<tr style="height: 39px;"> <!-- HERE -->
  <td>1</td>
  <td>10.20</td>
</tr>

老实说，这不是一个可行的解决方案，因为我无法预测主行的高度 - 它是自动的。

它在 Edge 或 Internet Explorer 上正常运行（有点讽刺）。

任何帮助将不胜感激。我会尽力解释得更好。

谢谢。

编辑：显示差异的图像：

编辑：

首先，我感谢所有的答案。其次，我很抱歉，我错过了另一个例子： https://codepen.io/anon/pen/OpeXGY

我添加了“酷 T 恤”的“黑色”的另一种变体，这可能会发生。

Answer 1

您应该阅读一些有关构建表格的基本教程。

您有 4 个标题，也需要四个单元格的 rows(tr)。

您的表格由 4 行组成，1 tr = 1 行。你需要 4 个<tr> 来构建它

rowspan 可以在这里使用一次，例如当 1 个产品有不同的颜色时。

th,td {border:1px solid;}

<table>
  <thead>
    <tr>
      <th class="column-product">Product</th>
      <th>Color</th>
      <th>Qty</th>
      <th>Price</th>
      <!-- TOTAL : 4 CELLS -->
    </tr>
  </thead>
  <tbody>
    <!-- 1st product -->
    <tr>
      <th>Epic Shorts</th><!-- you can use a header here too -->
      <td>Blue</td>
      <td>1</td>
      <td>10.20</td>
      <!-- TOTAL : 4 CELLS -->
    </tr>
    <!-- 2nd product -->
    <tr>
      <th rowspan="2">Cool T-Shirt</th><!-- will span to next row -->
      <td>Black</td>
      <td>1</td>
      <td>10.00</td>
      <!-- TOTAL : 4 CELLS -->
    </tr>
    <tr>
      <!-- [Cool T-Shirt] is spanning down here -->
      <td>Green</td>
      <td>2</td>
      <td>7.10</td>
      <!-- TOTAL : 4 CELLS (1 spanning)-->
    </tr>
  </tbody>
</table>