时间戳

首页 > 解决方案 > 为什么在顶行和中间行使用 rowspan 时中间行会消失？

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

问题描述

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

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

“第一和第二行跨度”：

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>

标签： htmlcsslayouthtml-table

解决方案

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

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

这有点hacky，但适用于一次性桌子。如果您要将一堆动态内容放入表格中，或者使用不同的行跨度和列跨度呈现动态数量的行和列，那么您最好使用更强大的东西（如 CSS Grid）来实现此布局。

推荐阅读