Semantic ui accordion inside table

Question

I want each table row to be clickable such that it expands like an accordion, but when the accordion activates, it doesn't take up the length of the entire row. How can I make it take up the entire row? The code is below.

<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

I was able to fix issues by overriding css. As I wanted to have multiple rows in the details part of the accordion, I used separate tbody for title and content, i. e.:

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

then my css file had the following addition:

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

and then some padding and border overrides.