如何創建一個HTML表，每行的列數未知，如何使列對齊，並為每個單元格/行設置一個ID？

Question

我正在嘗試使用div構建一個表，並能夠獲取與該表的每個單元格關聯的ID。 為此，我正在使用angularJS，並且試圖讓ng-repeat來做我想要的事情。

使用HTML表時，我們可以使用colspan定義列，因此即使列數不同，布局仍會顯示對齊的表。 但是，如果您不知道下一行是2列還是4列怎么辦？ 你怎么能控制呢？ 這就是為什么我使用div的原因，所以我可以根據需要的列數使用它們的寬度。

這是我目前正在研究的小提琴： http : //jsfiddle.net/xEyJZ/239/

任何幫助將不勝感激，因為我的問題是如何設置div，以便表看起來對齊。 如果檢查小提琴，則可以看到沒有任何列對齊。 理想情況下，最后一行應居中，兩列的行應在行中均勻分配，以此類推。

<div ng-controller="MyCtrl">
<table border="1">
    <tr ng-repeat="person in people" ng-class="rowClass(person)">
        <td>
            <div style="float:left;outline:black solid thin;" ng-click="test(person, 0)">{{ person.col0 }}</div>
            <div style="float:left;outline:black solid thin;" ng-hide="person.cols < 1" ng-click="test(person, 1)">{{ person.col1 }}</div>
            <div style="float:left;outline:black solid thin;" ng-hide="person.cols < 2" ng-click="test(person, 2)">{{ person.col2 }}</div>
            <div style="float:left;outline:black solid thin;" ng-hide="person.cols < 3" ng-click="test(person, 3)">{{ person.col3 }}</div>
        </td>
    </tr>
</table>

任何人都可以闡明一下嗎？

Answer 1

@jyrkim感謝您的幫助。
我設法用<div> s建立了一個表，其中的寬度是根據指定的列數計算的。
代碼本身仍然需要優化，就像@entropic所建議的那樣 ，但是這里是更新的jsfiddle以供將來參考：

更新小提琴