Семантический ui аккордеон внутри таблицы

Question

Я хочу, чтобы каждая строка таблицы была нажата так, чтобы она расширялась, как аккордеон, но когда аккордеон активируется, она не занимает длину всей строки. Как я могу заставить его заняться всей строкой? Код ниже.

<table class="ui selectable accordion fixed single line celled table"> 
    <thead> 
    <tr> 
     <th class="one wide id-row">ID</th> 
     <th class="fifteen wide name-row">Name</th> 
    </tr> 
    </thead> 
    <tbody> 
    {{#each data}} 
     <tr class="appRow title"> 
     <td class="id-row">{{_id}}</td> 
     <td class="name-row">{{name}}</td> 
     </tr> 
     <div class="content"> 
      <tr> 
      <td colspan="2">{{> form}}</td> 
      </tr> 
     </div> 
    {{/each}} 
    </tbody> 

Answer 1

Я смог исправить проблемы, переопределив css. Поскольку я хотел иметь несколько строк в деталях части аккордеона, я использовал отдельный tbody для заголовка и контента, т.е. е .:

<table class="ui table accordion"> 
    <tbody class="ui title"> 
    <tr><td.../></tr> 
    </tbody> 
    <tbody class="ui content"> 
    <tr><td.../></tr> 
    <tr.../> 
    <tr><td.../></tr> 
    </tbody> 
</table> 

тогда мой файл CSS имел следующее дополнение:

.ui.accordion tbody.ui.content.active { 
    display: table-row-group; 
} 

, а затем некоторые обивка и пограничные переопределяет.

Answer 2

Проблема в том, что и таблица, и аккордеон используют «активный» класс. Аккордеон также по умолчанию показывает «display: block».

Так быстрое решение (но неверно по причинам расширяемости) было бы ...

пойти table.import.less и изменить закомментировать весь этот раздел

.ui.table tr.active, 
.ui.table td.active { 
    box-shadow: @activeBoxShadow; 
} 
.ui.table tr.active, 
.ui.table td.active { 
    background: @activeBackgroundColor !important; 
    color: @activeColor !important; 
} 

, а затем перейти к accordion.import.less и изменения активного состояния в

.ui.accordion .active.content, 
.ui.accordion .accordion .active.content { 
    display: table-row; 
} 

и, наконец, изменить HTML код

<tr class="content"> 
    <td colspan="6">{{> form}}</td> 
</tr>