有没有办法将表格列显示为行？

Question

我继承了一些代码，这些代码接收数据源并将该数据呈现为 HTML 表，如下所示：

<table>
  <tr>
    <td>Mrs</td>
    <td>Jane</td>
    <td>Fonda</td>
  </tr>
  <tr>
    <td>Mr</td>
    <td>William</td>
    <td>Shakespeare</td>
  </tr>
</table>

我希望最后一个表格单元格内容（方达、莎士比亚）在其原始行下方显示为新行。有没有办法通过 CSS 来实现这一点？

Answer 1

我试过了，这是我目前最好的。我希望您能从中受益并改进。

https://jsfiddle.net/zj8r1amh/1/

<style>
  table {
    border-collapse: collapse;
  }

  td {
    border: 1px solid black;
    padding: 8px;
    position: relative;
  }
  td:last-child{border:0 none}
  td:last-child::after {
    content: attr(data-content);
    position: absolute;
    left: -113px;
    top: 100%;
    white-space: nowrap;
    background-color: white;
    border: 1px solid black;
    display: table-cell;
    padding: 8px;
    margin-top:34px
  }
</style>

<table>
  <tr>
    <td>Mrs</td>
    <td>Jane</td>
    <td data-content="Fonda"></td>
  </tr>
  <tr>
    <td>Mr</td>
    <td>William</td>
    <td data-content="Shakespeare"></td>
  </tr>
</table>