«юридическая» таблица HTML с несколькими строками заголовков с AngularJS

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: [] 
    } 
]; 

Моя большая забота - сохранить его «законным» HTML.

Так я в настоящее время переборе корыто groups используя большой <div class="group" ng-repeat="group in data"> Внутри каждого DIV У меня есть таблицы, как так:

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

С одной thead, содержащий имена столбцов: «название подгруппы, ELEMENT_NAME, total_scores, total_bonuses "затем нг-повторив TBODY так:

<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> 

Voila. Все это работает отлично, но у меня есть одна проблема: я бы хотел, чтобы ширины столбцов для каждой внешней таблицы (одна с total_scores, total_bonuses, ...) были выровнены друг с другом, но поскольку они представляют собой разные таблицы, она будет корректировать в соответствии с размером текста. Также я хочу сохранить это поведение (приспосабливаясь к размеру текста), а не заставлять ширину для каждого столбца.

Одно решение, которое работает, но не является законным HTML является использование только одна таблица для перечисления каждой подгруппы и имеют подпольную тег между <table> и <thead> и следующие <tbody> с тем чтобы я мог перебирать корыто подгруппы внутри одной и той же таблицы с одинаковые столбцы, но с несколькими <thead> s для изменения имени первого столбца и повторения других столбцов.

Итак, каковы мои законные варианты HTML, если они есть?

EDIT: Добавлен 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 и мы хотим некоторые столбцы для выравнивания.
• Любые элементы, такие как ng-switch или используемые для ng-повторителей, оставляют HTML недопустимым.
• Вы хотите отображать итоговые значения на уровнях групп, уровнях подгрупп, уровнях элементов, но допускается только 1 thead И единственным элементом, разрешенным под <tbody>, является <tr>, который будет получен ng-повторителями.
• Вставка таблицы не является вариантом, потому что тогда каждая таблица будет решать, как выровнять себя.

Таким образом, для любой таблицы с одним адам можно вложить не более трех уровней - один уровень для thead, взятый заголовком столбца, другой уровень для нескольких тел и третьего уровня (уровень листа) для нескольких tr в них ,

Другой вариант некрасиво стол

Если вы готовы пойти на компромисс в некоторых выглядеть и чувствовать себя вы можете try this plnkr. Здесь мы сглаживаем и вводим общий и родительский элементы. Я не рекомендую это и в соответствии с комментариями, которые я предлагаю использовать менее макет или другую альтернативу, выходящую за рамки вопроса.