html - Rowspan 属性不适用于倒排表

Question

请注意，“倒置”表示 <tr>现在代表一列。

我使用这个 CSS 代码(我在互联网上找到的)反转了一个 HTML 表格:

table {
  border-collapse: collapse;
}

tr {
  display: block;
  float: left;
}

th,
td {
  display: block;
  border: 1px solid black;
}

<table>
  <tr>
    <th>name</th>
    <th>id</th>
    <th>number</th>
  </tr>
  <tr>
    <td>James Bond</td>
    <td rowspan="2">1</td>
    <td>007</td>
  </tr>
  <tr>
    <td>Lucipher</td>
    <td>6</td>
    <td>666</td>
  </tr>
</table>

CSS 代码成功反转表格，当我尝试使用 rowspan 或 colspan 时，问题来了，它不起作用。我该如何解决？

Answer 1

通过将表格转换为 block ，它实际上不再是表格。我不相信您将能够使用此 CSS 规则集执行您要求的操作，因为 rowspan 和 colspan 是表格属性。

最好的解决方案是以不同的方式编写表格。 HTML 允许您编写带有标题的表格，如下所示:

<table>
  <tr>
    <th>name</th>
    <td>James Bond</td>
    <td>Lucipher</td>
  </tr>
  <tr>
    <th>id</th>
    <td colspan="2">1</td>
    <td>6</td>
  </tr>
  <tr>
    <th>number</th>
    <td>007</td>
    <td>666</td>
  </tr>
</table>

如果问题与需要转换的 SQL 查询有关，您可以将数据转储到值矩阵中，然后横向呈现它，或者在某些情况下，有一些方法可以更改您的查询来执行此操作，但是那些根据数据的复杂性，解决方案可能会非常困惑。