为什么在顶行和中间行中使用 rowspan 时中间行消失了？

Question

当我尝试显示以下信息时：

AB
AF
GF

并折叠包含公共数据的单元格，中间行消失，我得到：

AB
GF

在所有情况下，指定的单元格数似乎都是 6。

“完全”：

3 <tr>s
2 <td>s per <tr>

“行跨度优先”：

3 <tr>
1st <tr> <td rowspan='2'> <td>,
2nd <tr> 1st cell covered by previous <td rowspan='2'> <td>
3rd <tr> 2 <td>s

“rowspan first and second”：

3 <tr>s
1st <tr> <td rowspan='2'> <td>
2nd <tr> 1st cell covered by previous <td rowspan='2'> <td rowspan='2'>
3rd <tr> <td> 2nd cell covered by previous <td rowspan='2'>

HTML & CSS:

<!DOCTYPE html>
<html lang='en'>
<head>
  <meta charset='utf-8'>
  <title>test rowspan</title>
  <style>
table.b, table.b td, table.b th {
        border: 1px solid black;
        }
  </style>
</head>
<body>
<p>This passes NU HTML Checker, so the syntax seems to be correct</p>
  <p>completely specified</p>
  <table class='b'>
    <tbody>
      <tr><td>A</td><td>B</td></tr>
      <tr><td>A</td><td>F</td></tr>
      <tr><td>G</td><td>F</td></tr>
    </tbody>
  </table>
  <p>with rowspan first line only</p>
  <table class='b'>
    <tbody>
      <tr><td rowspan='2'>A</td><td>B</td></tr>
      <tr><td>F</td></tr>
      <tr><td>G</td><td>F</td></tr>
    </tbody>
  </table>
  <p>with rowspan first &amp; second lines combining F, middle row disappears</p>
  <table class='b'>
    <tbody>
      <tr><td rowspan='2'>A</td><td>B</td></tr>
      <tr><td rowspan='2'>F</td></tr>
      <tr><td>G</td></tr>
    </tbody>
  </table>
  <p>with rowspan second line only</p>
  <table class='b'>
    <tbody>
      <tr><td>A</td><td>B</td</tr>
      <tr><td>A</td><td rowspan='2'>F</td></tr>
      <tr><td>G</td></tr>
    </tbody>
  </table>
</body>
</html>

Answer 1

中间一行正在折叠，因为您已经从该行中删除了所有数据项。只要向其中添加一些数据，它就会返回，这可能是理想的解决方案。但是，如果 table 绝对必须只显示 2 列，您可以创建第三个隐藏列以使 table 呈现您想要的方式：

.table-container {
  border: 1px solid black;
  display: inline-block;
}

table.b td, table.b th {
  border: 1px solid black;
}

.hidden {
  visibility: hidden;
}

.hidden-column {
  margin-right: -17px;
}

<p>completely specified</p>
<div class='table-container'>
  <table class='b'>
    <tbody>
      <tr><td>A</td><td>B</td></tr>
      <tr><td>A</td><td>F</td></tr>
      <tr><td>G</td><td>F</td></tr>
    </tbody>
  </table>
</div>

<p>rowspan=2 on A column</p>
<div class='table-container'>
  <table class='b'>
    <tbody>
      <tr><td rowspan='2'>A</td><td>B</td></tr>
      <tr><td>F</td></tr>
      <tr><td>G</td><td>F</td></tr>
    </tbody>
  </table>
</div>

<p>rowspan=2 on F column</p>
<div class='table-container'>
  <table class='b'>
    <tbody>
      <tr><td>A</td><td>B</td></tr>
      <tr><td>A</td><td rowspan='2'>F</td></tr>
      <tr><td>G</td></tr>
    </tbody>
  </table>
</div>

<p>rowspan=2 on A & F columns (with 3rd dummy column)</p>
<div class='table-container'>
  <table class='b'>
    <tbody>
      <tr><td rowspan='2'>A</td><td>B</td><td>C</td></tr>
      <tr><td rowspan='2'>F</td><td>C</td></tr>
      <tr><td>G</td><td>C</td></tr>
    </tbody>
  </table>
</div>

<p>rowspan=2 on A & F columns (with 3rd dummy column but hidden)</p>
<div class='table-container'>
  <table class='b hidden-column'>
    <tbody>
      <tr><td rowspan='2'>A</td><td>B</td><td class="hidden">C</td></tr>
      <tr><td rowspan='2'>F</td><td class="hidden">C</td></tr>
      <tr><td>G</td><td class="hidden">C</td></tr>
    </tbody>
  </table>
</div>

它有点老套，但对于一次性 tables 来说效果很好。如果您要将一堆动态内容放入 table，或者使用不同的行跨度和列跨度呈现动态数量的行和列，您最好使用更健壮的东西来实现此布局像 CSS 网格。

为什么在顶行和中间行中使用 rowspan 时中间行消失了？

Why does the middle row disappear when I use rowspan in top and middle row?

html

css

layout

html-table