垂直渲染表格行

Question

是否可以垂直渲染表格行： 例如，如果我有此代码

<table>
   <tr> 
      <td>row1 - cell1</td>
      <td>row1 - cell2</td>
      <td>row1 - cell3</td>
   </tr>
   <tr> 
      <td>row2 - cell1</td>
      <td>row2 - cell2</td>
      <td>row2 - cell3</td>
   </tr>
   <tr> 
      <td>row3 - cell1</td>
      <td>row3 - cell2</td>
      <td>row3 - cell3</td>
   </tr>
</table>

这将呈现如下表格：

row1-cell1 | row1-cell2 | row1-cell3
------------------------------------
row2-cell1 | row2-cell2 | row2-cell3
------------------------------------
row3-cell1 | row3-cell2 | row3-cell3

我想要的是这样显示

row1-cell1 | row2-cell1 | row3-cell1
------------------------------------
row1-cell2 | row2-cell2 | row3-cell2
------------------------------------
row1-cell3 | row2-cell3 | row3-cell3

Answer 1

您可以在表行上使用display: inline-flex;和flex-direction: column;来实现此目的。

tr {
  display: inline-flex;
  flex-direction: column;
}

td {
  padding: 5px;
}

<table>
  <tr>
    <td>row1 - cell1</td>
    <td>row1 - cell2</td>
    <td>row1 - cell3</td>
  </tr>
  <tr>
    <td>row2 - cell1</td>
    <td>row2 - cell2</td>
    <td>row2 - cell3</td>
  </tr>
  <tr>
    <td>row3 - cell1</td>
    <td>row3 - cell2</td>
    <td>row3 - cell3</td>
  </tr>
</table>

Answer 2

假设您有一个对象数组：

function toTable(){
        var html = "<table>";
        for(var i=0; i < array.length; i++){
            var row = Object.keys(array[i]);
            html += "<tr>";
             for(var x=0; x < row.length; x++){
                  html += "<td>" + row[x] + "</td>";
             }
            html += "<tr>";
        }
        html += "</table>";
    }