具有多个行跨度的复杂HTML表格

vcirk6k6 于 2023-01-15 发布在其他

关注(0)|答案(1)|浏览(134)

我想创建一个有点复杂的HTML表，其中包含多个rowspan值，这些值从不同的行开始。
下面的HTML代码生成了随附的屏幕截图，在Safari和Chrome中几乎相同。

<table border="1">
  <tbody>
    <tr>
     <td rowspan="3">A</td>
     <td rowspan="2">B</td>
     <td rowspan="9">C</td>
    </tr>
    <tr>
     <td rowspan="1">b</td>
    </tr>
    <tr>
     <td rowspan="1">a</td>
     <td rowspan="9">Y</td>
    </tr>
    <tr>
     <td rowspan="8">X</td>
    </tr>
    <tr>
     <td rowspan="2">c</td>
    </tr>
    <tr>
     <td rowspan="1">Z</td>
    </tr>
  </tbody>
</table>

但我想得到的是一个像下面这样的表（请忽略未合并的单元格边框）。
| | | |
| - ------|- ------|- ------|
| A类|B|C级|
| A类|B|C级|
| A类|B|C级|
| 项目a|是|C级|
| 十|是|C级|
| 十|是|C级|
| 十|是|C级|
| 十|是|C级|
| 十|是|C级|
| 十|是|（c）秘书长的报告|
| 十|是|（c）秘书长的报告|
| 十|是|Z型|
如何修复代码？

Html

来源：https://stackoverflow.com/questions/75079282/complex-html-table-with-multiple-rowspan

1条答案

按热度按时间

iih3973s1#

在这里，您将面临的主要问题是某些tr没有td，即使由于rowspan而没有td，它们仍然需要声明。
此外，声明空行，它应该工作。

td {
  border: 1px solid black;
  width: 3em;
}

tr {
  height: 1em;
}

<table>
  <!-- Row 1 -->
  <tr>
    <td rowspan="9">A</td>
    <td rowspan="2">B</td>
    <td rowspan="9">C</td>
  </tr>
  <!-- Row 2 -->
  <tr></tr>
  <!-- Row 3 -->
  <tr>
    <td>b</td>
  </tr>
  <!-- Row 4 -->
  <tr>
    <td rowspan="9">Y</td>
  </tr>
  <!-- Row 5 -->
  <tr></tr>
  <!-- Row 6 -->
  <tr></tr>
  <!-- Row 7 -->
  <tr></tr>
  <!-- Row 8 -->
  <tr></tr>
  <!-- Row 9 -->
  <tr></tr>
  <!-- Row 10 -->
  <tr>
    <td>a</td>
    <td rowspan="2">c</td>
  </tr>
  <!-- Row 11 -->
  <tr>
    <td rowspan="2">X</td>
  </tr>
  <!-- Row 2 -->
  <tr>
    <td>Z</td>
  </tr>
</table>

赞(0）回复(0）举报 2023-01-15

我来回答

具有多个行跨度的复杂HTML表格

1条答案

相关问题

热门标签

最新问答