Question

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

此功能始终适用于Chrome，Edge或IE，但从未使用过Firefox，而这个错误始于Chrome上次更新（57）。当我使用多个行跨并且某些表格单元格有2行或更多行时，连续行高度无法正常工作。

老实说，我的英语正在进行中并且很难解释，所以我创建了一个例子：

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>

如您所见，产品＆＃34; Epic Shorts ＆＃34;只有一个变体 - 但它有2行，并且连续行的高度不遵循主行高。产品＆＃34; 酷T恤＆＃34;并没有发生这个问题，因为它有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

我添加了另一个＆＃34; Black＆＃34; ＆＃34;酷T恤＆＃34;，这可能发生。

Answer 1

你应该阅读一些关于构建表的基本教程。

你有4个标题，它们也期望四个单元格的行（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

1 个答案: