jquery - 表内的语义 ui Accordion

Question

我希望每个表行都可以单击，以便它像 Accordion 一样展开，但是当 Accordion 激活时，它不会占用整行的长度。我怎样才能让它占据整行？代码如下。

<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 来解决问题。由于我想在 Accordion 的详细信息部分中有多行，因此我对标题和内容使用了单独的 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;
}

然后是一些填充和边框覆盖。