javascript - 如何创建一个 html 表，每行的列数未知，使列对齐，并为每个单元格/行提供一个 id？

Question

我正在尝试使用 div 构建一个表格，并能够获取与表格的每个单元格关联的 id。为此，我正在使用 angularJS，并且我正在尝试让 ng-repeat 来做我想做的事情。

当使用 HTML 表格时，我们可以使用 colspan 来定义列，这样即使列数不同，布局仍然显示对齐的表格。但是，如果您不知道下一行是 2 列还是 4 列怎么办？你怎么能控制它？这就是我使用 div 的原因，这样我就可以根据我需要的列数来调整它们的宽度。

这是我目前正在研究的 fiddle : http://jsfiddle.net/xEyJZ/239/

任何帮助将不胜感激，因为我的问题是如何设置 div，以便表格看起来对齐。如果您检查 fiddle ，您会发现没有任何列对齐。理想情况下，最后一行应居中，具有两列的行应均匀地分布在行中，等等。

<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 以供将来引用:

Updated fiddle