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

【问题标题】：Is there a CSS/HTML property/attribute that can swap a table's rows & columns?是否有可以交换表格行和列的 CSS/HTML 属性/属性？
【发布时间】：2018-12-03 21:46:12
【问题描述】：

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

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

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

【问题讨论】：

How to invert (transpose) the rows and columns of an HTML table?的可能重复

标签： html css html-table

【解决方案1】：

对不起，没有。

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

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

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

【讨论】：

【解决方案2】：

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

单独使用 HTML 和 CSS 没有干净的方法。（虽然rotating the table's cells 90° 确实很有趣。）

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

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

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

【讨论】：

【解决方案3】：

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

David Bushell 有这个解决方案（使用 flexbox）： http://dbushell.com/2016/03/04/css-only-responsive-tables/

还有这个解决方案（使用浮点数）

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

http://jsfiddle.net/XKnKL/3/

【讨论】：

【解决方案4】：

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

How to invert (transpose) the rows and columns of an HTML table?

【讨论】：