html - ネストされたテーブルを使用した foreach のノックアウト

Question

少し特殊な状況があります。ノックアウト js がこれを達成する方法を提供してくれることを願っています。

私は次の構造を持っています：

Order = function() {
    var self = this;
    self.Name = 'default';
}

Customer = function() {
     var self = this;
     self.Name = 'default';
     self.Orders = [];
}

私は次の表を持っています

<table>
    <thead>
        <tr>
            <th>Customer Name</th>
        </tr>
    </thead>
    <tbody data-bind="foreach: CustomerArray">
        <tr>
            <td data-bind="text: Name"></td>
        </tr>
    </tbody>
</table>

これは素晴らしいことです。すべての顧客名のリストが表示されます。

次に、ステップ 2 として、テーブルが一覧表示されるようにテーブルをフォーマットする必要があります。注文名、最後に顧客名:

Customer Name (TH LABEL)
Order1
Order2
Order3
Smith, Frank

各顧客の反復内に tbody を含めることで注文配列をネストするというアイデアを思いつきましたが、注文から顧客までの列幅が異なるテーブルであるため整列しないため、このアプローチは好きではありません。

私の異常な問題を解決する良い方法はありますか?

ありがとうございました！