在 rowspan 中创建带有十进制数字的行答案

【问题标题】：Create a row with decimal number in rowspan在 rowspan 中创建带有十进制数字的行
【发布时间】：2023-01-01 00:35:17
【问题描述】：

可以用 rowspan 创建这个表吗？？

|---------|---------|  
| 1       |4        |
|---------|         |
| 2       |---------| 
|---------|5        |
| 3       |         |
|---------|---------|

第二列内的每一行都有 1.5 ?

我认为它可能与属性“高度”一起玩，或者可能在第二列内创建另一个表......

但是只有 rowspan 和 colspan 才有可能吗？

【问题讨论】：

这是可能的。您必须在第二列中创建表。

标签： html html-table

【解决方案1】：

Rowsapn 必须是整数，但您可以使用

td {
  border: 1px solid;
  padding: 20px;
}

<table>
  <tr>
    <td>1</td>
    <td rowspan="2">4</td>
  </tr>
  <tr>
    <td rowspan="2">2</td>
  </tr>
  <tr>
    <td rowspan="2">5</td>
  </tr>
  <tr>
    <td>3</td>
  </tr>
</table>

【讨论】：

一点解释会有所帮助。您的代码如何工作？
如果您检查渲染的表格，您可以清楚地看到它与模型不匹配。

【解决方案2】：

我创建了两个表：主表和子表。在主表中，我创建了 2 列 3 行。在您的示例中，这三个用于 1、2、3。在另一列中，我创建了另一个包含一列和两行的小表格。

<table border=1 width='200' height='100' cellpadding='0' cellspacing='0'>
  <tr>
    <td width='100'>&nbsp;</td>
    <td rowspan="3">
      <table border='1' width="100" cellpadding='0' cellspacing='0' height='100%'>
        <tr>
          <td>&nbsp;</td>
        </tr>
        <tr>
          <td>&nbsp;</td>
        </tr>
      </table>
    </td>
  </tr>
  <tr>
    <td>&nbsp;</td>
  </tr>
  <tr>
    <td>&nbsp;</td>
  </tr>
</table>

【讨论】：

这似乎是实现模型中所需的精确布局的唯一方法。

【解决方案3】：

解释：我们不能将 rowspan 设置为十进制值，例如 0.5。
因此，使每个单元格的行跨度加倍，以便 0.5 有效地变为 1，1.5 有效地变为 3。

<!DOCTYPE html>
<html>

<head>
  <style>
    table,
    th,
    td {
      border: 1px solid black;
      border-collapse: collapse;
    }
  </style>
</head>

<body>

  <table>
    <tbody>
      <!-- ROW 1 -->
      <tr>
        <td rowspan="2">1</td>
        <td rowspan="3">4</td>
      </tr>

      <!-- ROW 2 -->
      <tr>
      </tr>

      <!-- ROW 3 -->
      <tr>
        <td rowspan="2">2</td>
      </tr>

      <!-- ROW 4 -->
      <tr>
        <td rowspan="3">5</td>
      </tr>

      <!-- ROW 5 -->
      <tr>
        <td rowspan="2">3</td>
      </tr>

      <!-- ROW 6 -->
      <tr>
      </tr>


    </tbody>
  </table>


</body>

</html>

【讨论】：

这是无效的 HTML，因为您不能有空的 tr，而且表格也没有按照模型中的要求呈现。