您可以在表行上使用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>

假设你有一个对象数组：

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>";
    }

<table class="vertical-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>

CSS样式

.vertical-table {
   display: table;
}

.vertical-table tr {
   display: inline-grid;
}

.vertical-table td {
   display: table-cell;
   border: 1px solid black;
}

输出