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

Posted 2023-03-06

【中文标题】使用多行跨度时行高不正确

【英文标题】：Incorrect row height when using multiple rowspan

【发布时间】：2017-09-02 21:41:16

【问题描述】：

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

这一直适用于 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 恤”的“黑色”的另一种变体，这可能会发生。

【问题讨论】：

我没有看到关于此代码行为的任何问题（或 Chrome 和 Firefox 之间的任何差异）。可以加几张截图吗？

好的，刚刚添加了截图。

这是我的屏幕截图：我在 Firefox 上看到了一些奇怪的东西……但在 Chrome 中没有……imgur.com/a/BW62L（无法在 IE/Edge 上测试）

谢谢@jaumemk。

太棒了，有人刚刚对我的问题投了反对票，甚至没有告诉我原因。我怎样才能学习或取得进步？

【参考方案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>

【讨论】：

感谢您的宝贵时间。拜托，你能检查我的编辑吗？请理解，您可能不这么认为，但我了解表格的工作原理。这不是我要展示的简单场景，并且根据设计，可以使用表/行跨度。 rowspan 的工作方式总是使这种情况在我工作的所有浏览器（Chrome（Blink/WebKit）、Safari（macOS/ios）、IE、Edge、android 等）中都成为可能，但 Firefox 除外。这不是我错过的东西，或者我需要“阅读一些关于构建表格的基本教程”。 Firefox 自 2008 年以来一直存在关于此错误的问题：bugzilla.mozilla.org/show_bug.cgi?id=431403

@jaumemk 发布了此屏幕截图，显示该错误在 Chrome 和 Linux 上的 Firefox 上都没有发生。 imgur.com/a/BW62L 无论如何，我感谢您抽出时间来帮助我。我希望我们都能从中学到一些东西。

@KimTranjan 你好，刚刚看到你的更新和 codepen：我按照我自己的拙见分叉了它的构建方式：codepen.io/gc-nomade/pen/zZVwNX 一个屏幕阅读器可以帮助你确定你的 go 是否合适标记数据的方法；）

@KimTranjan 在 html 中添加了 cmets 来解释为什么我认为这是一个正确的结构。 ;)

谢谢@GCyrillus！