时间戳

首页 > 解决方案 > 当不同行中的colspans（或不同列中的rowspans）是互质数时，html表格的奇怪呈现

html - 当不同行中的colspans（或不同列中的rowspans）是互质数时，html表格的奇怪呈现

问题描述

考虑下表。单元格具有以下名称(r row_id, c col_id, rs rowspan, cs colspan)：

                       | (r 0, c 1, rs 2, cs 1)
(r 0, c 0, rs 3, cs 1) |_______________________
_______________________| (r 2, c 1, rs 2, cs 1)
                       |_______________________
(r 3, c 0, rs 3, cs 1) | (r 4, c 1, rs 2, cs 1)
                       |

当我尝试在 html 中创建这个表时，我得到了一些奇怪的结果。我的html代码：

<!DOCTYPE html>
<html>
<head>
<style>
td, th {
  padding: 8px;
  border: 2px solid;
}
table {
  border: 2px solid;
}
</style>
</head>
<body>

<table>

<tr>
    <td rowspan=3 colspan=1 > (r 0, c 0, rs 3, cs 1) </td>
    <td rowspan=2 colspan=1 > (r 0, c 1, rs 2, cs 1) </td>
</tr>

<tr>
    <td rowspan=2 colspan=1 > (r 2, c 1, rs 2, cs 1) </td>
</tr>

<tr>
    <td rowspan=3 colspan=1 > (r 3, c 0, rs 3, cs 1) </td>
</tr>

<tr>
    <td rowspan=2 colspan=1 > (r 4, c 1, rs 2, cs 1) </td>
</tr>

</table>

</body>
</html>

我在 Chrome 95.0.4638.54、Firefox 93.0、Edge 94.0.992.50 中的结果大致相同： 在此处输入图像描述

这绝对不是我期望看到的。

问题：

  1. 如何使用 html达到我上图所示的预期结果？
  2. 浏览器如何呈现 html 表格是否有一些严格的定义？
  3. 如何在网页上实现预期结果，也许使用纯 html 之外的东西？

PS 如果我们将表格顺时针旋转90度以上，我们的情况大致相同：

       (r 0, c 0, rs 1, cs 3)        |      (r 0, c 3, rs 1, cs 3)
_____________________________________|_______________________________________
                        |                          |
(r 1, c 0, rs 1, cs 2)  |  (r 1, c 2, rs 1, cs 2)  |  (r 1, c 4, rs 1, cs 2)

该案例的 html 代码（只是表格片段）：

<table>

<tr>
    <td rowspan=1 colspan=3 > (r 0, c 0, rs 1, cs 3) </td>
    <td rowspan=1 colspan=3 > (r 0, c 3, rs 1, cs 3) </td>
</tr>

<tr>
    <td rowspan=1 colspan=2 > (r 1, c 0, rs 1, cs 2) </td>
    <td rowspan=1 colspan=2 > (r 1, c 2, rs 1, cs 2) </td>
    <td rowspan=1 colspan=2 > (r 1, c 4, rs 1, cs 2) </td>
</tr>

</table>

有趣的是，在这种情况下，在 Chrome 和 Edge 中我看到了丑陋的结果，但在 Firefox 中，结果是我所期望的。上面指定的浏览器版本。

PPS 如果我们在表格中添加辅助单元格：

<table>

<tr>
    <td rowspan=1 colspan=1 bgcolor="#888"> row -1 </td>
    <td rowspan=1 colspan=1 bgcolor="#888"> col 0 </td>
    <td rowspan=1 colspan=1 bgcolor="#888"> col 1 </td>
</tr>

<tr>
    <td rowspan=1 colspan=1 bgcolor="#888"> row 0 </td>
    <td rowspan=3 colspan=1 > (r 0, c 0, rs 3, cs 1) </td>
    <td rowspan=2 colspan=1 > (r 0, c 1, rs 2, cs 1) </td>
</tr>

<tr>
    <td rowspan=1 colspan=1 bgcolor="#888"> row 1 </td>
</tr>

<tr>
    <td rowspan=1 colspan=1 bgcolor="#888"> row 2 </td>
    <td rowspan=2 colspan=1 > (r 2, c 1, rs 2, cs 1) </td>
</tr>

<tr>
    <td rowspan=1 colspan=1 bgcolor="#888"> row 3 </td>
    <td rowspan=3 colspan=1 > (r 3, c 0, rs 3, cs 1) </td>
</tr>

<tr>
    <td rowspan=1 colspan=1 bgcolor="#888"> row 4 </td>
    <td rowspan=2 colspan=1 > (r 4, c 1, rs 2, cs 1) </td>
</tr>

<tr>
    <td rowspan=1 colspan=1 bgcolor="#888"> row 5 </td>
</tr>

</table>

我们可以达到预期的结果，但在某些情况下可能不合适： 在此处输入图像描述

PPPS 我知道一些建议可以根据预期的形状进行设置和手动width设置，但是，首先，这不起作用（或者请为我的案例提供工作示例），其次，我希望这种方法有很多缺点heightpxtdtr

标签： htmlhtml-table

解决方案

推荐阅读