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以供将来参考：

Updated fiddle

如何创建一个html表，每行的列数未知，是否要对齐列，并为每个单元格/行设置一个id？

1 个答案: