html - 是否有可以交换表格行和列的 CSS/HTML 属性/属性？

Question

是否有语义 CSS 或 HTML 属性/属性来显示table交换的行和列？

换句话说，我想以一种方式编写代码，但有一些东西可以用列翻转行，反之亦然。

环顾四周，我只发现了交换它们的 JavaScript 方法，但就我而言——这不是我想要的。（如果没有 CSS/HTML 解决方案，那么我宁愿重构代码。）

score 3 · Accepted Answer

对不起，但没有。

您可能会通过将整个表格旋转 90 度，然后将单元格向相反方向旋转 90 度来获得接近的效果。您可能还需要手动设置所有元素的高度和宽度以使其看起来合理。

不过，这将是一个重大的黑客攻击；我真的不推荐它。

对此没有任何其他 CSS 解决方案；当然不是“标准”的。这并不完全是一件标准的事情。

score 3 · Accepted Answer

我理解您的担忧，但目前的答案是否定的：

单独使用 HTML 和 CSS 没有干净的方法。（尽管将表格的单元格旋转 90°绝对很有趣。）

正如您自己建议的那样，这种情况有几个选择：

重构您的代码（例如，使用脚本/自动化手动重新编码表格，或者在 Google Docs 电子表格中进行并导出为 HTML — 几年前曾经是可能的。）
如果您不想重构，请使用 JavaScript 进行切换；或者使用 JavaScript 作为一个函数来切换回重构的代码——以防万一你希望在你的网站上有一个按钮，上面写着"Flip Table".
尝试使用 CSS 旋转单元格的建议和实验方法。

这将取决于您想要什么以及您的实施细节。我会说渐进增强的 JaveScript 在大多数人的书中都是干净的代码（但在这种情况下，它不会优雅地降级，因为没有 JS 访问的人会看到原始的 HTML 表）。搜索引擎也会选择 JS。

score 3 · Accepted Answer

但实际上至少有两种不同的 CSS 解决方案。

而这个解决方案（使用浮动）

tr { display: block; float: left; }
th, td { display: block; }

score 2 · Accepted Answer

不是我知道的。看起来你想做这样的事情：

4 回答 4