Question

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

我使用此CSS代码（在Internet上找到）反转了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

通过将表转换为块，它实际上不再是表。我不相信您将能够使用此CSS规则集执行要求的操作，因为rowpan和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查询有关，则可以将数据转储到值矩阵中，然后侧向呈现，或者在某些情况下，可以通过一些方法更改查询来执行此操作，但是根据数据的复杂性，解决方案可能会造成混乱。

Rowspan属性不适用于反转表

1 个答案: