Html 如何用数据垂直填充表格？

我想在HTML表中垂直排列三个数组。每个数组将在自上而下的列中填充其数据

例如，我有三个数组：

fruit = ['pear', 'apple', 'orange']
veges = ['corn', 'radish', 'lettuce']
meat = ['beef', 'chicken', 'pork']

我希望桌子看起来像这样：

<table>
  <tr>
    <td>
      pear
    </td>
  </tr>
  <tr>
    <td>
      corn
    </td>
  </tr>
  <tr>
    <td>
      beef
    </td>
  </tr>

  <tr>
    <td>
      apple
    </td>
  </tr>
  <tr>
    <td>
      radish
    </td>
  </tr>
  <tr>
    <td>
      chicken
    </td>
  </tr>

  <tr>
    <td>
      orange
    </td>
  </tr>
  <tr>
    <td>
      lettuce
    </td>
  </tr>
  <tr>
    <td>
      pork
    </td>
  </tr>
</table>

梨
玉米
牛肉
苹果
萝卜
鸡
橙色
生菜
猪肉

看看这个网站：

以下是相关代码（本例中的实例变量仅用于明确标识控制列数和行数的内容）：

我可能会用它来重新排列事物，以匹配您的

的外观：

rows = [ fruit, veges, meat ].transpose

[
  ["pear", "corn", "beef"],
  ["apple", "radish", "chicken"],
  ["orange", "lettuce", "pork"]
]

现在，

行

将如下所示：

rows = [ fruit, veges, meat ].transpose

[
  ["pear", "corn", "beef"],
  ["apple", "radish", "chicken"],
  ["orange", "lettuce", "pork"]
]

生成表只需迭代

行

：

%table
  - rows.each do |row|
    %tr
      - row.each do |food|
        %td= food

同样的问题，还没有解决方案：还有一个：