html - 单独使用 CSS，您可以将表格列中的每个单元格浮动到相应行的顶部吗？

Question

假设我有一个使用标准<table>HTML 元素构建的表格，它看起来像这样（从概念上讲）：

-------------
| 1 | 2 | 3 | 
--------|----
| 4 | 5 | 6 |
--------|----
| 7 | 8 | 9 |
-------------

仅使用 CSS，我可以让它像这样显示吗？

---------
| 3     |
| 1 | 2 | 
--------|
| 6     |
| 4 | 5 |
--------|
| 9     |
| 7 | 8 |
---------

假设现代浏览器没有框架。

我从尝试明显的开始，只是添加style="float:left"到<td>元素中，但这基本上没有做任何事情。

我尝试用谷歌搜索“浮动表格单元格”并发现这个问题为什么浮动和文本对齐在 td 中表现不同？，但那是从 2014 年开始，许多浏览器版本之前，而且无论如何都在谈论TD 内的标记，而我想要的是实际浮动 TD 在 row 内。

2020年能做到吗？

这是原始的 HTML

<table>
<tr><td>1</td><td>2</td><td>3</td></tr>
<tr><td>4</td><td>5</td><td>6</td></tr>
<tr><td>7</td><td>8</td><td>9</td></tr>
</table>

这是第一次失败的尝试：

<table>
<tr><td>1</td><td>2</td><td style="float: left">3</td></tr>
<tr><td>4</td><td>5</td><td>6</td></tr>
<tr><td>7</td><td>8</td><td>9</td></tr>
</table>

标签： htmlcsshtml-table

Answer 1

一种可能性是重置一些显示属性，但丢失整个表格的初始表格布局并将其设置回每个 tr。table-layout:fixed除非涉及到，否则通过 trs 的列不会匹配：

tr {
  display:table;
}
table, 
td {
  border:solid 1px;
}
tr td:nth-child(3) {
  display:table-caption;
  background:gray;
  margin:0 2px;
}

<table>
  <tr>
    <td>1</td><td>2</td><td>3</td>
  </tr>
  <tr>
    <td>4</td><td>5</td><td>6</td>
  </tr>
  <tr>
    <td>7</td><td>8</td><td>9</td>
  </tr>
</table>