编辑：添加了一个plnkr

Question

我正在尝试显示一个4级数据集的表。基本上是这样的：

var data = [
    {
        group_id: 1,
        group_name: 'group1',
        subgroups: [
            {
                subgroup_id: 1,
                subgroup_name: 'subgroup1',
                elements : [
                    {
                        element_id: 1,
                        element_name: 'element1',
                        element_members: [
                            {
                                name: 'aaaa',
                                score: 150,
                                bonus: 32
                            },
                            {
                                name: 'bbbb',
                                score: 75,
                                bonus: 33
                            }
                        ]
                    },
                    {
                        element_id: 2,
                        element_name: 'element2',
                        element_members: [
                            {
                                name: 'cccc',
                                score: 780,
                                bonus: 71
                            },
                            {
                                name: 'dddd',
                                score: 900,
                                bonus: 311
                            }
                        ]
                    }
                ]
            },
            {
                subgroup_id: 2,
                subgroup_name: 'subgroup2',
                elements: []
            }
        ]
    },
    {
        group_id: 2,
        group_name: 'group2',
        subgroups: []
    }
];

我最关心的是保持它合法＆＃34; HTML。

所以我目前正在使用一个大groups进行<div class="group" ng-repeat="group in data">迭代。在每个div中我都有这样的表：

<table class="subgroup" ng-repeat="subgroup in group.subgroups">

一个thead包含列名：＆＃34;子组名，element_name，total_scores，total_bonuses＆＃34;然后像这样一个重复重复的人：

<tbody ng-repeat="element in subgroup.elements">

然后再次，因为我想显示每行内的元素总数，如果点击;每个元素的细节，所以我有：

<tr ng-click="element.expanded = !element.expanded">

其中的数据然后是

<tr ng-if="typo.expanded">
    <td colspan="4">
        <table>
            <thead>
                <tr>
                    <th>Member name</th>
                    <th>Member score</th>
                    <th>Member bonus</th>
                </tr>
            </thead>
            <tbody>
                <tr ng-repeat="member in element.element_members">
                    <td>{{ member.name }}</td>
                    <td>{{ member.score }}</td>
                    <td>{{ member.bonus }}</td>
                </tr>
            </tbody>
        </table>
    </td>
</tr>

瞧。所有这一切都很完美，但我有一个问题：我希望每个外表的列宽（带有total_scores，total_bonuses，...的列）彼此对齐，但由于它们是不同的表，它会调整根据文字的大小。此外，我想保持这种行为（调整文本的大小），而不是强制每列的宽度。

一个有效但不合法HTML的解决方案是仅使用一个表列出每个子组，并在<table>和<thead>以及以下<tbody>之间设置一个秘密标记，以便我可以使用相同的列迭代同一个表内的子组，但使用多个<thead>来更改第一列名称并重复其他列。

那么，如果有的话，我的合法HTML选项是什么？

编辑：添加了一个plnkr

Here is a link to a plnkr illustrating my problem：一个组标题下的2个表（每个子组一个）不具有相同的列大小，我希望我可以将它们放入一个表中（因此会有一个表）相反，每个组，以便至少在同一组内，子组显示相同的列大小。

Answer 1

我希望每个外部表（具有total_scores，total_bonuses，...）的列宽度彼此对齐，但由于它们是不同的表，因此它将根据文本的大小进行调整。

由于它们是彼此堆叠的多个表，因此每个表将根据其内容对齐其列，而不考虑预期的其他表。

和之间的秘密标签多个s

如上所述，上述两种情况都会违法。

我相信主要问题： -

那么，如果有的话，我的合法HTML选项是什么？

当你有一个深层次的嵌套和任意长度的项目/组时，使用<table>没有好的（不是丑陋的）替代方案。

以下是主要原因：

<table>只能有1个<thead>且只有1个tfoot，但您示例中的nester组会有几个级别groups->subGroups->elements->members，我们希望某些列对齐。< / LI>
任何元素如ng-switch或用于ng-repeaters都会使HTML无效。
您希望在组级别，子组级别和元素级别显示总计，但只允许1 thead，并且<tbody>下允许的唯一元素是<tr> NG-中继器。
表格嵌套不是一个选项，因为每个表格将决定如何对齐。

因此，通过设计，任何具有单个thead的表都允许最多嵌套3个级别 - 列标题占用的一个级别，多个tbody的另一个级别和多个tr的第三级别（叶级别）。

其他丑陋的表格选项

如果你愿意在一些外观上妥协，你可以try this plnkr。在这里，我们已经扁平化并注入了总元素和父元素。我不建议这样做，根据评论，我建议使用较少的布局或超出问题范围的其他替代方案。

＆＃34;法律＆＃34;带有AngularJS的多个标题行的HTML表

编辑：添加了一个plnkr

1 个答案: