表内的语义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;
}

然后一些填充和边框覆盖.